import {
  TimePicker as OldTimePicker,
  TimePickerProps,
  ConfigProvider,
  TimeRangePickerProps,
} from 'antd';
import React, { useContext, useEffect, useMemo, useState } from 'react';
import './index.less';
import classNames from 'classnames';
import locale from 'antd/es/date-picker/locale/zh_CN';
import { Icon } from '../Icon';
import { Button } from '../Button';
import moment from 'moment';
import { AOP } from '../utils/AOP';
import { translate } from '../utils';

interface TimePickerExtraProps {}

const TimePicker = (props: TimePickerProps & TimePickerExtraProps) => {
  // 为了与 antd 的生态保持兼容性，我们要求必须要使用 `.@{ant-prefix}` 变量来生成类名
  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
  const prefixCls = getPrefixCls('btri-timePicker');
  const popupCls = getPrefixCls('btri-timePicker-popup');

  const { popupClassName, showNow = true, value, onChange } = props;
  const [timeValue, setTimeValue] = useState(value);
  useEffect(() => {
    setTimeValue(value);
  }, [value]);
  const nowNode = useMemo(() => {
    return (
      <>
        {showNow && (
          <Button
            type="text"
            textColor="var(--primary-6)"
            onClick={() => {
              setTimeValue(moment());
              onChange?.(moment(), moment().format('HH:mm:ss'));
            }}
          >
            {translate('packages.base.src.TimePicker.index.此刻')}
          </Button>
        )}
      </>
    );
  }, [showNow]);

  const newOnChange = new AOP<moment.Moment | string, void>(onChange)
    .after((val) => {
      setTimeValue(val as moment.Moment);
    })
    .getFunction();

  return (
    <OldTimePicker
      className={classNames(`${prefixCls}-box`, props.className)}
      locale={locale}
      suffixIcon={<Icon iconName="Time" style={{ fontSize: '16px' }}></Icon>}
      // clearIcon={<Icon iconName="CloseOne" theme="filled" size={16}></Icon>}
      renderExtraFooter={() => nowNode}
      {...props}
      showNow={false}
      popupClassName={classNames(`${popupCls}-box`, popupClassName)}
      value={timeValue}
      onChange={newOnChange}
    ></OldTimePicker>
  );
};

interface RangePickerExtraProps {}

const RangePicker: React.FC<TimeRangePickerProps & RangePickerExtraProps> = (
  props,
) => {
  // 为了与 antd 的生态保持兼容性，我们要求必须要使用 `.@{ant-prefix}` 变量来生成类名
  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
  const prefixCls = getPrefixCls('btri-timeRangePicker');
  const popupCls = getPrefixCls('btri-timeRangePicker-popup');

  const { popupClassName, onChange, showNow = true } = props;

  const [timeRangeValue, setTimeRangeValue] = React.useState<
    [moment.Moment, moment.Moment]
  >([null, null]);
  const newOnChange = new AOP<
    [moment.Moment, moment.Moment] | [string, string],
    void
  >(onChange)
    .after((vals) => {
      setTimeRangeValue(vals as [moment.Moment, moment.Moment]);
    })
    .getFunction();

  useEffect(() => {
    setTimeRangeValue(props.value);
  }, [props.value]);

  const nowNode = useMemo(() => {
    return (
      <>
        {showNow && (
          <Button
            type="text"
            onClick={() => {
              setTimeRangeValue([moment(), moment()]);
              onChange?.(
                [moment(), moment()],
                [moment().format('HH:mm:ss'), moment().format('HH:mm:ss')],
              );
            }}
            textColor="var(--primary-6)"
          >
            {translate('packages.base.src.TimePicker.index.此刻')}
          </Button>
        )}
      </>
    );
  }, [showNow]);

  return (
    <OldTimePicker.RangePicker
      className={classNames(`${prefixCls}-box`, props.className)}
      locale={locale}
      suffixIcon={<Icon iconName="Time" style={{ fontSize: '16px' }}></Icon>}
      // clearIcon={
      //   <Icon iconName="CloseOne" theme="filled" fill={} size={16}></Icon>
      // }
      renderExtraFooter={() => nowNode}
      {...props}
      showNow={false}
      value={timeRangeValue}
      onChange={newOnChange}
      popupClassName={classNames(`${popupCls}-box`, popupClassName)}
    ></OldTimePicker.RangePicker>
  );
};

TimePicker.RangePicker = RangePicker;

export { TimePicker };