import { Checkbox, Form, Space } from 'antd';
import _ from 'lodash';
import type { Dispatch, ReactNode, SetStateAction } from 'react';
import { useIntl } from 'umi';
import { validate, validateDay } from '../utils';
import CustomDay from './CustomDay';
import CustomDatePicker from './index';

export interface CustomLabelProps {
  label: ReactNode;
  data?: any[];
  selectId: string | number;
  isHaveDate?: boolean;
  isHaveDay?: boolean;
  isHaveCheckBox?: boolean;
  isBind?: boolean;
  disabled?: boolean;
  setSelectIdMap: Dispatch<SetStateAction<Record<string, any>>>;
  onChange?: (val: any) => void;
}

const CustomLabel = (props: CustomLabelProps) => {
  const {
    label,
    data,
    selectId,
    isHaveDate,
    isHaveDay,
    isHaveCheckBox = false,
    isBind = false,
    disabled,
    setSelectIdMap,
    onChange,
  } = props;

  const { formatMessage } = useIntl();

  if (!isHaveDate && !isHaveDay && !isHaveCheckBox) return <>{label}</>;

  const idMap = _.keyBy(data || [], 'id');
  const selectIdObj = idMap[selectId];

  if (!selectIdObj || isBind) return <>{label}</>;

  const selectExpiredAt = selectIdObj.expiredAt;
  const isDefaultCheck = selectIdObj.isDefaultCheck;
  const isVlidate = selectExpiredAt === 0 || selectExpiredAt;
  const showToolbar = !disabled && (!isHaveCheckBox || (isHaveCheckBox && isDefaultCheck));

  return (
    <Form.Item
      noStyle
      required={true}
      validateStatus={isVlidate ? 'success' : 'error'}
      {...(isVlidate
        ? {}
        : {
            help: isHaveDate
              ? formatMessage({ id: 'component.CustomDatePicker.help' })
              : isHaveDay
              ? formatMessage({
                  id: 'component.CustomDay.help',
                })
              : null,
          })}
    >
      <span
        style={{ width: '100%', color: disabled ? 'rgba(0, 0, 0, 0.25)' : 'rgba(0, 0, 0, 0.85)' }}
      >
        {label}
        &nbsp;&nbsp;
        <Space>
          {Boolean(isHaveDate && showToolbar) && (
            <CustomDatePicker
              disabled={disabled}
              value={selectExpiredAt}
              onChange={(val: any) => {
                const res = {
                  ...idMap,
                  [`${selectId}`]: {
                    ...selectIdObj,
                    expiredAt: !isHaveDate ? undefined : val ? val.valueOf() : val,
                  },
                };
                setSelectIdMap(res);
                validate(isHaveDate, res, onChange);
              }}
            />
          )}

          {Boolean(isHaveDay && showToolbar) && (
            <CustomDay
              disabled={disabled}
              value={selectExpiredAt}
              optionLimit
              lengthLimit
              onChange={(val) => {
                const res = {
                  ...idMap,
                  [`${selectId}`]: {
                    ...selectIdObj,
                    expiredAt: !isHaveDay ? undefined : val,
                  },
                };
                setSelectIdMap(res);
                validateDay(isHaveDay, res, onChange);
              }}
            />
          )}

          {Boolean(isHaveCheckBox && !disabled) && (
            <Checkbox
              checked={isDefaultCheck}
              disabled={disabled}
              onChange={(e) => {
                const res = {
                  ...idMap,
                  [`${selectId}`]: {
                    ...selectIdObj,
                    isDefaultCheck: !isHaveCheckBox ? undefined : e.target.checked,
                  },
                };
                setSelectIdMap(res);
                const selectIdMapValues = Object.values(res);
                onChange?.({ data: selectIdMapValues });
              }}
            >
              {formatMessage({ id: 'base.common.default', defaultMessage: 'Default' })}
            </Checkbox>
          )}
        </Space>
      </span>
    </Form.Item>
  );
};
export default CustomLabel;