import type { BaseElementProps } from './types';
import type { CheckboxProps as AntCheckboxProps } from 'antd';
import { Checkbox as AntCheckbox, Form } from 'antd';
import type { CheckboxChangeEvent } from 'antd/lib/checkbox';
import type { FC } from 'react';

const { Item: FormItem } = Form;

type ElementProps = {
  text: string;
};

type CheckboxProps = AntCheckboxProps & ElementProps;

function Checkbox({
  value,
  setValue,
  status,
  isValid,
  help,
  text,
  ...props
}: BaseElementProps<boolean> & ElementProps) {
  function handleChange(event: CheckboxChangeEvent) {
    setValue(event.target.checked);
  }

  return (
    <FormItem hasFeedback help={help} validateStatus={isValid === false ? 'error' : ''}>
      <AntCheckbox
        checked={value}
        disabled={status === 'Disabled'}
        onChange={handleChange}
        {...props}
      >
        {text}
      </AntCheckbox>
    </FormItem>
  );
}

export default Checkbox as FC<CheckboxProps>;