import * as React from 'react';
import { useEffect } from 'react';
import { FastCheckboxGroup } from 'components/ui';
import { Component } from 'components/types';
import useOptions from '../hooks/useOptions';
import { FormTypes } from '../../types';

function Checkbox(props: FormTypes.FormItem.FormAtomicSelectProps) {
  const {
    config,
    values,
    validateTrigger,
  } = props;
  const {
    key,
    notModify,
    data: defaultOptions = [],
    interact,
  } = config;

  // states
  const { ajaxOptions, setOptions } = useOptions(props);

  // effects
  const deps = interact && interact.type === Component.Business.ResultType.fetch
    ? [values[interact.triggerKey as string]] : [];

  // eslint-disable-next-line react-hooks/exhaustive-deps
  useEffect(
    setOptions,
    [
      // setOptions,
      ...deps,
    ],
  );

  return (
    <FastCheckboxGroup
      disabled={notModify}
      value={values[key]}
      options={[...defaultOptions, ...ajaxOptions]}
      // eslint-disable-next-line react/destructuring-assignment
      onChange={props[validateTrigger]}
    />
  );
}

export default Checkbox;