import { Select } from 'antd';
import type { SelectProps } from 'antd';
import { useIntl } from 'umi';
import _ from 'lodash';
type GroupOption = {
  label: React.ReactNode;
  options: { label: string; value: any }[];
};
const GroupSelect = (props: SelectProps & { options: GroupOption[] }) => {
  const { formatMessage } = useIntl();
  const { value, onChange, options, ...rest } = props;
  const handleSelect = (op: GroupOption) => {
    onChange?.(_.uniq([...(value || []), ...op.options.map((item) => item.value)]), op);
  };
  return (
    <Select
      options={options?.map((item: GroupOption) => ({
        label: (
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <span>{item.label}</span>
            <a onClick={() => handleSelect(item)}>
              {formatMessage({ id: 'component.check.all', defaultMessage: '全选' })}
            </a>
          </div>
        ),
        options: item.options,
      }))}
      value={value}
      onChange={onChange}
      mode="multiple"
      allowClear
      {...rest}
    />
  );
};

export default GroupSelect;