import * as React from 'react';
import * as PropTypes from 'prop-types';
import { LabelProps as ReakitLabelProps } from 'reakit/ts';

import Text from '../Text';
import { formikField, reduxFormField } from '../adaptors/fields';
import _Checkbox, { CheckboxIcon, HiddenCheckbox } from './styled';

export type LocalCheckboxProps = {
  /** Automatically focus on the checkbox */
  autoFocus?: boolean;
  checked?: boolean;
  checkboxRef?: React.RefObject<any>;
  className?: string;
  /** Is the checkbox checked by default? */
  defaultChecked?: boolean;
  /** Disables the checkbox */
  disabled?: boolean;
  /** ID for the checkbox */
  id?: string;
  indeterminate?: boolean;
  /** Makes the checkbox required and sets aria-invalid to true */
  isRequired?: boolean;
  /** Checkbox label */
  label?: string;
  name?: string;
  /** State of the checkbox. Can be any color in the palette. */
  state?: string;
  /** Initial value of the checkbox */
  value?: boolean | string;
  /** Function to invoke when focus is lost */
  onBlur?: React.FocusEventHandler<HTMLInputElement>;
  /** Function to invoke when checkbox has changed */
  onChange?: React.FormEventHandler<HTMLInputElement>;
  /** Function to invoke when checkbox is focused */
  onFocus?: React.FocusEventHandler<HTMLInputElement>;
};
export type CheckboxProps = LocalCheckboxProps & ReakitLabelProps;
export type CheckboxComponents = {
  Formik: React.FunctionComponent<CheckboxProps>;
  ReduxForm: React.FunctionComponent<CheckboxProps>;
};

export const Checkbox: React.FunctionComponent<LocalCheckboxProps> & CheckboxComponents = ({
  autoFocus,
  checked,
  checkboxRef,
  className,
  defaultChecked,
  disabled,
  id,
  indeterminate,
  isRequired,
  label,
  onBlur,
  onChange,
  onFocus,
  name,
  state,
  value,
  ...props
}) => (
  <_Checkbox aria-invalid={state === 'danger'} aria-required={isRequired} {...props}>
    <HiddenCheckbox
      autoFocus={autoFocus}
      checked={checked}
      defaultChecked={defaultChecked}
      disabled={disabled}
      elementRef={checkboxRef}
      id={id}
      indeterminate={indeterminate}
      onBlur={onBlur}
      onChange={onChange}
      onFocus={onFocus}
      name={name}
      state={state}
      type="checkbox"
      // @ts-ignore
      value={value}
    />
    <CheckboxIcon state={state} />
    {label && <Text marginLeft="minor-2">{label}</Text>}
  </_Checkbox>
);

Checkbox.Formik = formikField(Checkbox, { isCheckbox: true });
Checkbox.ReduxForm = reduxFormField(Checkbox, { isCheckbox: true });

export const checkboxPropTypes = {
  autoFocus: PropTypes.bool,
  checked: PropTypes.bool,
  className: PropTypes.string,
  checkboxRef: PropTypes.object as PropTypes.Validator<LocalCheckboxProps['checkboxRef']>,
  defaultChecked: PropTypes.bool,
  disabled: PropTypes.bool,
  id: PropTypes.string,
  indeterminate: PropTypes.bool,
  isRequired: PropTypes.bool,
  label: PropTypes.string,
  name: PropTypes.string,
  state: PropTypes.string,
  value: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
  onBlur: PropTypes.func,
  onChange: PropTypes.func,
  onFocus: PropTypes.func
};
Checkbox.propTypes = checkboxPropTypes;

export const checkboxDefaultProps = {
  autoFocus: false,
  checked: undefined,
  className: undefined,
  checkboxRef: undefined,
  defaultChecked: undefined,
  disabled: false,
  id: undefined,
  indeterminate: false,
  isRequired: false,
  label: undefined,
  onBlur: undefined,
  onChange: undefined,
  onFocus: undefined,
  name: undefined,
  state: undefined,
  value: undefined
};
Checkbox.defaultProps = checkboxDefaultProps;

// @ts-ignore
const C: React.FunctionComponent<CheckboxProps> & CheckboxComponents = Checkbox;
export default C;