import { Button, Modal, Space } from 'antd';
import { useCallback, useContext, useEffect, useRef, useState } from 'react';
import { FormattedMessage, useIntl } from 'umi';
import { AppDetailContext } from '../utils/hooks';
import CustomDay from './CustomDay';

type CustomBatchDayProps = {
  value?: any;
  onChange?: (val: any) => void;
  applyAll?: (val: any) => void;
};

const CustomBatchDay = ({ value, onChange, applyAll }: CustomBatchDayProps) => {
  const { formatMessage } = useIntl();
  const [open, setOpen] = useState(false);
  const [cValue, setValue] = useState(value);
  const ref = useRef(false);
  const appDetail = useContext(AppDetailContext);
  const { maxLengthExpirationTime } = appDetail || {};

  useEffect(() => {
    if (ref.current && (cValue || cValue === 0)) {
      setOpen(true);
    }
  }, [cValue]);

  useEffect(() => {
    ref.current = true;
  }, []);

  const second2Day = useCallback(
    (second: number) => {
      const defOpts = [
        {
          label: formatMessage({ id: 'component.customDay.0.5', defaultMessage: '0.5' }),
          value: 0.5,
        },
        {
          label: formatMessage({ id: 'component.customDay.7', defaultMessage: '7' }),
          value: 7,
        },
        {
          label: formatMessage({ id: 'component.customDay.30', defaultMessage: '30' }),
          value: 30,
        },
        {
          label: formatMessage({ id: 'component.customDay.90', defaultMessage: '90' }),
          value: 90,
        },
        {
          label: formatMessage({ id: 'component.customDay.180', defaultMessage: '180' }),
          value: 180,
        },
        {
          label: formatMessage({ id: 'component.customDay.365', defaultMessage: '365' }),
          value: 365,
        },
        {
          label: formatMessage({ id: 'component.customDay.730', defaultMessage: '730' }),
          value: 730,
        },
        {
          label: formatMessage({ id: 'component.customDay.1095', defaultMessage: '1095' }),
          value: 1095,
        },
      ];
      const day = second / 24 / 60 / 60; // 转天
      return (
        defOpts.find((v) => v.value === day)?.label ??
        `${day}${formatMessage({ id: 'public.const.Day' })}`
      );
    },
    [formatMessage],
  );

  return (
    <Space style={{ width: '100%' }} size={'large'}>
      <FormattedMessage id="component.CustomBatchDatePicker.label" />
      <CustomDay
        lengthLimit
        optionLimit
        value={cValue}
        onChange={(val) => {
          setValue(val);
          onChange?.(val);
        }}
      />
      {Boolean(maxLengthExpirationTime) && (
        <label style={{ color: 'red' }}>
          {formatMessage(
            { id: 'component.CustomBatchDatePicker.maxLength' },
            { day: second2Day(maxLengthExpirationTime) },
          )}
        </label>
      )}
      <Modal
        open={open}
        title={<FormattedMessage id="component.CustomBatchDatePicker.label" />}
        onCancel={() => {
          setOpen(false);
        }}
        // onOk={() => setOpen(false)}
        footer={
          <Space>
            <Button
              onClick={() => {
                setOpen(false);
                applyAll?.(cValue === 0 ? cValue : cValue.valueOf());
              }}
              type="primary"
            >
              <FormattedMessage id="component.CustomBatchDatePicker.apply.all" />
            </Button>
          </Space>
        }
      >
        {cValue === 0
          ? formatMessage({ id: 'component.CustomBatchDatePicker.apply.all.confirm' })
          : `${formatMessage({ id: 'component.CustomBatchDatePicker.apply.add.confirm' })}${
              cValue
                ? cValue
                : formatMessage({ id: 'pages.setting.base.defaultExpirationTime.forever' })
            }${formatMessage({ id: 'public.const.Day' })}?`}
      </Modal>
    </Space>
  );
};

export default CustomBatchDay;