import { Col, Radio, Row, Select } from 'antd';
import { Dayjs } from 'dayjs';
import { Lunar } from 'lunar-typescript';
import { FC } from 'react';

const getYearLabel = (year: number) => {
    const d = Lunar.fromDate(new Date(year + 1, 0));
    return `${d.getYearInChinese()}年（${d.getYearInGanZhi()}${d.getYearShengXiao()}年）`;
};

const getMonthLabel = (month: number, value: Dayjs) => {
    const d = Lunar.fromDate(new Date(value.year(), month));
    const lunar = d.getMonthInChinese();
    return `${month + 1}月（${lunar}月）`;
};
interface CustomHeaderProps {
    value: Dayjs;
    type: string;
    onChange: (date: Dayjs) => void;
    onTypeChange: (e: any) => void;
}
const CustomHeader: FC<CustomHeaderProps> = ({ value, type, onChange, onTypeChange }) => {
    const start = 0;
    const end = 12;
    const monthOptions = [];

    let current = value.clone();
    const localeDate = (value as any).localeData();
    const months = [];
    for (let i = 0; i < 12; i++) {
        current = current.month(i);
        months.push(localeDate.monthsShort(current));
    }

    for (let i = start; i < end; i++) {
        monthOptions.push({
            label: getMonthLabel(i, value),
            value: i,
        });
    }

    const year = value.year();
    const month = value.month();
    const options = [];
    for (let i = year - 10; i < year + 10; i += 1) {
        options.push({
            label: getYearLabel(i),
            value: i,
        });
    }
    return (
        <Row justify="end" gutter={8} style={{ padding: 8 }}>
            <Col>
                <Select
                    size="small"
                    className="my-year-select"
                    value={year}
                    options={options}
                    onChange={(newYear) => {
                        const now = value.clone().year(newYear);
                        onChange(now);
                    }}
                />
            </Col>
            <Col>
                <Select
                    size="small"
                    value={month}
                    options={monthOptions}
                    onChange={(newMonth) => {
                        const now = value.clone().month(newMonth);
                        onChange(now);
                    }}
                />
            </Col>
            <Col>
                <Radio.Group
                    size="small"
                    onChange={(e) => onTypeChange(e.target.value)}
                    value={type}
                >
                    <Radio.Button value="month">月</Radio.Button>
                    <Radio.Button value="year">年</Radio.Button>
                </Radio.Group>
            </Col>
        </Row>
    );
};
export default CustomHeader;