import {Component} from 'react'
import dayjs, {Dayjs, ManipulateType} from 'dayjs'
import {
    RangePickerProps,
    RangePickerState,
} from '../inner-comps/inner-range-picker'
import {
    DatePickerProps,
    DatePickerState,
} from '../inner-comps/create-inner-date-picker'
import {createInitOpts} from './create-init-opts'

export interface TypeDisplayedDateSwitcherInitOpts {
    onDisplayDateChange: (date: Dayjs) => void
}


export type TypeMonthPanelValueProp = 'value' | 'displayedDate'
    | 'startDisplayedDate' | 'endDisplayedDate';

export type TypeMonthPanelDisplayProp = 'displayedDate' | 'zoomedDisplayedDate'
    | 'startDisplayedDate' | 'endDisplayedDate'
    | 'startZoomedDisplayedDate' | 'endZoomedDisplayedDate';

/**
 * 控制面板上, 前后一年或前后一月的操作逻辑
 *
 * @param comp
 * @param opts
 */
export function createDisplayedDateSwitcher(
    // comp: TypeInnerDatePicker | InnerRangePicker,
    comp: Component<DatePickerProps | RangePickerProps, Partial<RangePickerState & DatePickerState>>,
    opts: {
        displayProp: TypeMonthPanelDisplayProp
    }
) {
    const {displayProp} = opts
    const initOpts = createInitOpts<TypeDisplayedDateSwitcherInitOpts>('DisplayedDateSwitcher')

    function navigateTo(
        type: 'add' | 'subtract',
        unit: dayjs.ManipulateType
    ) {
        const rawDisplayed = comp.state[displayProp] as Dayjs
        const display = rawDisplayed[type](1, unit)

        comp.setState({
            [displayProp]: display,
        })

        if (initOpts.inited) {
            initOpts.get().onDisplayDateChange(display)
        }
    }


    return {
        init: initOpts.init,

        goBackwardYear() {
            navigateTo('subtract', 'year')
        },

        goForwardYear() {
            navigateTo('add', 'year')
        },

        goBackwardMonth() {
            navigateTo('subtract', 'month')
        },

        goForwardMonth() {
            navigateTo('add', 'month')
        },
    }
}