import { ReactWrapperComponent } from '@angular-react/core'
import {
  ChangeDetectorRef,
  Component,
  ElementRef,
  EventEmitter,
  Input,
  NgZone,
  OnInit,
  Output,
  Renderer2,
  ViewChild
} from '@angular/core'
import { ButtonProps } from 'qohash-ui'

@Component({
  selector: 'rk-button',
  template: `
    <Button #reactNode [variant]="variant" (onClick)="onClickHandler($event)">
      <ReactContent><ng-content></ng-content></ReactContent>
    </Button>
  `,
  styles: ['react-renderer']
})
export class RkButtonComponent extends ReactWrapperComponent<ButtonProps> implements OnInit {
  @ViewChild('reactNode') protected reactNodeRef: ElementRef
  @Input() variant?: ButtonProps['variant']
  @Output() readonly onClick = new EventEmitter<MouseEvent>()
  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) {
    super(elementRef, changeDetectorRef, renderer, true)
  }

  onClickHandler(ev?: React.MouseEvent) {
    this.onClick.emit(ev.nativeEvent)
    console.log('click')
  }

  ngOnInit() {}
}