import React from 'react';
import PropTypes from 'prop-types';
import omit from 'lodash/omit';
import CheckBox from '../CheckBox';

import FieldControl from '../FieldControl';

function getInputProps(props) {
  const { input, ...resultProps } = props;
  return { ...resultProps, ...input };
}

class CheckBoxes extends React.Component {
  static propTypes = {
    options: PropTypes.arrayOf(
      PropTypes.shape({
        value: PropTypes.oneOfType([
          PropTypes.string,
          PropTypes.number,
          PropTypes.bool,
          PropTypes.array,
          PropTypes.object
        ]),
        label: PropTypes.string,
        disabled: PropTypes.bool
      })
    ),
    onChange: PropTypes.func,
    disabled: PropTypes.bool,
    mandatory: PropTypes.bool,
    input: PropTypes.object
  };

  static defaultProps = {
    options: [],
    onChange: null,
    disabled: false,
    mandatory: false,
    input: null
  };

  onChange = (checkedValue, initialValue) => {
    const { input } = this.props;
    const { value = [], onChange } = input || this.props;
    let resultValue;
    const valueFound = value instanceof Array && value.find(
      item => JSON.stringify(item) === JSON.stringify(initialValue)
    );
    if (valueFound) {
      resultValue = value.filter(item => JSON.stringify(item) !== JSON.stringify(initialValue));
    } else {
      resultValue = value instanceof Array ? [...value] : [];
      resultValue.push(initialValue);
    }
    if (typeof onChange === 'function') {
      onChange(resultValue);
    }
  };

  onFocus = () => {
    const { input } = this.props;
    const { value = [], onFocus } = input || this.props;
    if (typeof onFocus === 'function') {
      onFocus(value);
    }
  };

  onBlur = () => {
    const { input } = this.props;
    const { value = [], onBlur } = input || this.props;
    if (typeof onBlur === 'function') {
      onBlur(value);
    }
  }

  render() {
    const { options, ...props } = this.props;
    return (
      <FieldControl {...props}>
        {restProps => {
          const {
            value,
            disabled,
            ...resultProps
          } = getInputProps(restProps);
          const resultValue = value instanceof Array ? value : [];
          return options.map(({ value: optionValue, label: optionLabel, disabled: optionDisabled }) =>
            <CheckBox
              optionValue={optionValue}
              value={
                resultValue.find(item => JSON.stringify(item) === JSON.stringify(optionValue)) ? optionValue : undefined
              }
              onChange={this.onChange}
              onFocus={this.onFocus}
              onBlur={this.onBlur}
              disabled={!!(disabled || optionDisabled)}
              key={JSON.stringify(optionValue)}
              {...omit(resultProps, ['onChange', 'onFocus', 'onBlur'])}
              withoutMarge
            >
              {optionLabel}
            </CheckBox>
          );
        }}
      </FieldControl>
    );
  }
}

CheckBoxes.CheckBox = CheckBox;
export default CheckBoxes;
