import React, { useMemo } from 'react';
import { Checkbox } from 'antd';
import { CheckboxGroupProps as ACheckboxGroupProps, CheckboxValueType } from 'antd/es/checkbox/Group';

const defOptions = [{ label: '', value: true }];

export interface CheckboxGroupProps
  extends Omit<ACheckboxGroupProps, 'onChange' | 'value'> {
  id: string; // form item name
  value: CheckboxValueType[] | CheckboxValueType | undefined;
  onChange(value: CheckboxValueType | CheckboxValueType[], id: string): void
}

export default ({ id, ...props }: CheckboxGroupProps) => {

  function onChange(e: CheckboxValueType[]) {
    if (props.options) props.onChange(e, id);
    else props.onChange(e[0], id);
  }

  const value = useMemo(() => {
    if (props.options) return props.value as CheckboxValueType[];

    return props.value ? [props.value as CheckboxValueType] : []
  }, [props.value, props.options]);

  return (
    <Checkbox.Group
      options={defOptions}
      {...props}
      value={value}
      onChange={onChange} />
  )
}