"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

const tslib_1 = require("tslib");
/* eslint-disable brace-style */


const react_1 = tslib_1.__importDefault(require("react"));

const styleh_components_1 = require("styleh-components");

const ToggleItem_1 = tslib_1.__importDefault(require("../../../../components/molecules/ToggleList/ToggleItem"));

const exotic_1 = require("exotic");

const InputChain_1 = require("../../InputChain");

const ObserverInput_1 = tslib_1.__importDefault(require("../../ObserverInput"));

const StyledToggleItem = styleh_components_1.styled.withComponent(ToggleItem_1.default)`svg{height:1.25rem;width:1.25rem;border-radius:0.3125rem;}`; // THIS IS NOT A REACT COMPONENT, BUT BABEL IS HIJACKING IT...

class CheckboxInput extends InputChain_1.InputChain {
  constructor() {
    super(...arguments);

    this.setIsSelected = (opposite = undefined) => {
      this.get('state').isSelected = opposite === undefined ? !this.get('state').isSelected : opposite;
    }; // 1. checking if it is the right one
    // ^ this means nobody ever has to change ObserverInput
    // ... it's externally configurable by anyone in a standard pattern :-)


    this.handleToggle = () => {
      const state = this.get('state');
      const props = this.get('props'); // onToggle, onChange, onSelect, onClick...

      console.log('this.state', state, props);

      if (exotic_1.isFunction(props.onToggle)) {
        props.onToggle(state);
      } // common props - used in makeDefault, maybe gift options
      else if (exotic_1.isFunction(props.onClick)) {
          props.onClick();
        } // common state
        else if (exotic_1.isFunction(state.handleToggleSelected) === true) {
            state.handleToggleSelected();
          } // input state
          else if (exotic_1.isFunction(state.setIsSelected) === true) {
              state.setIsSelected(!state.isSelected);
            } // @note added
      // if (isFunction(this.state.onClick)) {
      //   this.state.onToggle(this.state)
      // }

    };
  }

  static isSatisfiedByProps(props) {
    return props.type === 'checkbox';
  } // @action
  // no need for any params because we have this.parent & this.state & this.props
  // no need to return, this only sets a property on state


  validate() {
    console.dev('CheckboxInput_validate');
    const {
      value,
      validationType
    } = this.get('state');
    this.isValid = validators.isValid(value, validationType);
  } // 2. this is the view


  render() {
    const props = this.get('props'); // console.log('CheckboxInput_render', props)

    const onClick = this.handleToggle;
    const type = this.type;
    const isRadio = props.type === ObserverInput_1.default.radioButton;
    const isCheckBox = props.type === 'checkbox';
    const attributes = Object.assign({}, props, {
      onClick,
      isRadio,
      isCheckBox
    });
    return react_1.default.createElement(StyledToggleItem, Object.assign({}, attributes));
  }

}

exports.CheckboxInput = CheckboxInput;
exports.default = CheckboxInput; //# sourceMappingURL=CheckboxInput.js.map