import { PikFormControl } from 'common/components/PikFormControl';
import { action, observable } from 'mobx';
import { observer } from 'mobx-react';
import React, { Props } from 'react';
import { guid } from 'utils/guid';
import { Input, Label, Wrapper } from './components';
import { IPikCheckboxProps } from './types';

@observer
export class PikCheckbox extends PikFormControl<boolean, IPikCheckboxProps> {
  @observable isChecked: boolean;
  @observable isCheckedValue: string = 'false';
  @observable prev: boolean;
  private textarea: any;
  guid: string;

  constructor(props: IPikCheckboxProps) {
    super(props);
    // console.log('constructor');
    const { defaultValue } = props;
    if (defaultValue) {
      this.isChecked = defaultValue;
      this.prev = defaultValue;
    }
    if (defaultValue) {
      this.isCheckedValue = defaultValue.toString();
      this.isChecked = defaultValue;
    }
    this.guid = this.props.id || guid();
  }

  componentDidUpdate(): void {
    console.log('----UPDATE START-------');
    console.log('prev', this.prev);
    console.log('now', this.props.checkboxValue);
    if (this.prev !== this.props.defaultValue) {
      this.isChecked = this.props.defaultValue;
      this.props.onChange(this.props.name, this.isChecked);
      console.log('G');
    }
    this.prev = this.props.defaultValue;
    console.log('----UPDATE END-------');
  }

  @action.bound
  handleChange(e: React.ChangeEvent<HTMLInputElement>): void {
    // console.log('DSD');
    // this.isChecked = !this.isChecked;
    // const isChecked = e.currentTarget.checked;
    // this.isCheckedValue = isChecked.toString();
    this.isChecked = !this.isChecked;
    e.stopPropagation();
    if (this.props.nativeOnChange) {
      return this.props.nativeOnChange(e);
    }
    if (!this.props.onChange) {
      return;
    }
    this.props.onChange(this.props.name, this.isChecked);
  }

  @action.bound
  handleClick(e: any): void {
    this.isChecked = !this.isChecked;
    // this.props.onChange(this.props.name, this.isChecked);
  }

  render(): JSX.Element {
    const { children, defaultValue, id, checkboxValue, ...checkboxAttributes } = this.props;
    // console.log('q', this.isChecked);
    return (
      <Wrapper>
        <Input
          {...checkboxAttributes}
          // onClick={this.handleClick}
          onChange={this.handleChange}
          value={this.isCheckedValue}
          id={this.guid}
          checked={this.isChecked}
        />
        <Label htmlFor={this.guid}>{children}</Label>
      </Wrapper>
    );
  }
}