import React, { useCallback } from 'react';
import classnames from 'classnames';
import {
  XuiReactAngleDoubleLeftIcon,
  XuiReactAngleLeftIcon,
  XuiReactAngleDoubleRightIcon,
  XuiReactAngleRightIcon,
} from '@jy-fe/icons';
import { CalendarHeadProps } from './xui-calendar-head.d';

const Index: React.FC<CalendarHeadProps> = ({
  prevYearQuick,
  prevYear,
  nextYearQuick,
  nextYear,
  prevMonth,
  nextMonth,
  selectYear,
  selectMonth,
  showYearQuickSelect,
  showMonthQuickSelect,
  year,
  month,
  onSelectYear,
  onSelectMonth,
}) => {
  const handleSelectYear = useCallback(() => {
    if (selectYear && onSelectYear) {
      onSelectYear();
    }
  }, [selectYear, onSelectYear]);

  const handleSelectMonth = useCallback(() => {
    if (!showYearQuickSelect && selectMonth && onSelectMonth) {
      onSelectMonth();
    }
  }, [selectMonth, onSelectMonth, showYearQuickSelect]);
  const xuiPrefix = 'xui-ant';
  const className = `${xuiPrefix}-calendar-header`;
  let leftBtn;
  let rightBtn;
  if (showYearQuickSelect) {
    leftBtn = (
      <XuiReactAngleDoubleLeftIcon
        className={`${className}--doubleLeft`}
        onClick={() => prevYearQuick()}
      />
    );
  } else if (showMonthQuickSelect) {
    leftBtn = (
      <XuiReactAngleDoubleLeftIcon
        className={`${className}--doubleLeft`}
        onClick={() => prevYear()}
      />
    );
  } else {
    leftBtn = (
      <>
        <XuiReactAngleDoubleLeftIcon
          className={`${className}--doubleLeft`}
          onClick={() => prevYear()}
        />
        <XuiReactAngleLeftIcon className={`${className}--left`} onClick={() => prevMonth()} />
      </>
    );
  }
  if (showYearQuickSelect) {
    rightBtn = (
      <XuiReactAngleDoubleRightIcon
        className={`${className}--doubleRight`}
        onClick={() => nextYearQuick()}
      />
    );
  } else if (showMonthQuickSelect) {
    rightBtn = (
      <XuiReactAngleDoubleRightIcon
        className={`${className}--doubleRight`}
        onClick={() => nextYear()}
      />
    );
  } else {
    rightBtn = (
      <>
        <XuiReactAngleRightIcon className={`${className}--right`} onClick={() => nextMonth()} />
        <XuiReactAngleDoubleRightIcon
          className={`${className}--doubleRight`}
          onClick={() => nextYear()}
        />
      </>
    );
  }

  return (
    <div className={className}>
      <span style={{ display: 'flex' }}>{leftBtn}</span>
      <span className={`${className}--dateInfo`}>
        <span
          className={classnames(
            `${className}--dateInfo--year`,
            selectYear ? `${className}--dateInfo--yearSelect` : '',
          )}
          onClick={handleSelectYear}
        >
          <span style={{ fontWeight: 'bold' }}>{year}</span>年
        </span>
        <span
          className={classnames(
            `${className}--dateInfo--month`,
            !showYearQuickSelect && selectMonth ? `${className}--dateInfo--monthSelect` : '',
          )}
          onClick={handleSelectMonth}
        >
          <span style={{ fontWeight: 'bold' }}>{month + 1}</span>月
        </span>
      </span>
      <span style={{ display: 'flex' }}>{rightBtn}</span>
    </div>
  );
};

export default Index;