import {
  DatePicker as OldDatePicker,
  ConfigProvider,
  DatePickerProps,
} from 'antd';
import zhLocale from 'antd/es/date-picker/locale/zh_CN';
import React, { useContext, useEffect, useMemo, useState } from 'react';
import './index.less';
import classNames from 'classnames';
import { Icon } from '../Icon';
import { Button } from '../Button';
import { RangePickerProps } from 'antd/lib/date-picker/generatePicker';
import { Moment } from 'moment';
import { MonthPickerProps, WeekPickerProps } from 'antd/lib/date-picker';
import moment from 'moment';
import { AOP } from '../utils/AOP';
import { translate } from '../utils/index';

interface DatePickerExtraProps {
  showWeekAgo?: boolean;
}

interface RangePickerExtraProps {}

const DatePicker: React.FC<
  DatePickerExtraProps & DatePickerProps & MonthPickerProps & WeekPickerProps
> & {
  RangePicker: React.FC<RangePickerExtraProps & RangePickerProps<Moment>>;
} = (props) => {
  const {
    dropdownClassName,
    value,
    showWeekAgo,
    onChange,
    showToday,
    picker = 'date',
  } = props;
  // 为了与 antd 的生态保持兼容性，我们要求必须要使用 `.@{ant-prefix}` 变量来生成类名
  const { getPrefixCls, locale } = useContext(ConfigProvider.ConfigContext);
  const prefixCls = getPrefixCls('btri-datePicker');
  const dropdownCls = getPrefixCls('btri-datePicker-dropdown');

  const [dayValue, setDayValue] = useState<moment.Moment>(value);
  useEffect(() => {
    setDayValue(value);
  }, [value]);

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

  const reserveDaysNode = useMemo(() => {
    return (
      <div className="dayHandleBox">
        {showWeekAgo && (
          <Button
            className="day"
            type="text"
            textColor="var(--primary-6)"
            onClick={() => {
              setDayValue(
                moment(new Date().getTime() - 7 * 24 * 60 * 60 * 1000),
              );
            }}
          >
            {translate(
              'packages.base.src.DatePicker.index.7天前',
              locale?.locale,
            )}
          </Button>
        )}
        {showToday && (
          <Button
            className="day"
            type="text"
            textColor="var(--primary-6)"
            onClick={() => {
              setDayValue(moment());
            }}
          >
            {translate(
              'packages.base.src.DatePicker.index.今天',
              locale?.locale,
            )}
          </Button>
        )}
      </div>
    );
  }, [showToday]);

  return (
    <div className={classNames(`${prefixCls}-box`)}>
      <OldDatePicker
        locale={(locale as any) || zhLocale}
        suffixIcon={
          <Icon iconName="Calendar" style={{ fontSize: '16px' }}></Icon>
        }
        renderExtraFooter={
          picker === 'date' &&
          (showWeekAgo || showToday) &&
          (() => reserveDaysNode)
        }
        {...props}
        // @ts-ignore
        showToday={false}
        dropdownClassName={classNames(dropdownCls, dropdownClassName)}
        value={dayValue}
        onChange={newOnChange}
      ></OldDatePicker>
    </div>
  );
};

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

  const dropdownCls = getPrefixCls('btri-rangePicker-dropdown');

  return (
    <div className={classNames(`${prefixCls}-box`)}>
      <OldDatePicker.RangePicker
        ranges={{
          [translate(
            'packages.base.src.DatePicker.index.15天',
            locale?.locale,
          )]: [
            moment(new Date().getTime() - 14 * 24 * 60 * 60 * 1000),
            moment(),
          ],
          [translate('packages.base.src.DatePicker.index.7天', locale?.locale)]:
            [moment(new Date().getTime() - 7 * 24 * 60 * 60 * 1000), moment()],
        }}
        locale={(locale as any) || zhLocale}
        suffixIcon={<Icon iconName="Calendar"></Icon>}
        {...props}
        dropdownClassName={classNames(dropdownCls, props.dropdownClassName)}
      ></OldDatePicker.RangePicker>
    </div>
  );
};

DatePicker.RangePicker = RangePicker;

export { DatePicker };