import {
    createRef,
    range,
} from '@befe/brick-utils'
import {TypeAsideItem} from '@befe/brick-ui-comps'
import {getYearList} from '../utils/date-utils'
import {UiAside} from '../ui-comps/ui-aside'
import {InnerRangePicker} from '../inner-comps/inner-range-picker'
import {TypeInnerDatePicker} from '../inner-comps/create-inner-date-picker'
import {PanelComp} from '../module-defs/common-types'
import {TypeMonthPanelDisplayProp} from './create-date-switcher'

export function createAside(
    comp: TypeInnerDatePicker | InnerRangePicker,
    opts: {
        displayProp: TypeMonthPanelDisplayProp
        onYearChange?: (year: string | number) => void
    }
) {
    const _comp = comp as PanelComp
    const {displayProp} = opts

    const asideRef = createRef<UiAside>()

    const context = {
        yearAnchor: 0,
    }

    const getDisplayed = () => _comp.state[displayProp]!

    const handleYearChange = (year: string | number) => {
        _comp.setState({
            [displayProp]: getDisplayed().year(~~year),
        }, () => {
            opts.onYearChange && opts.onYearChange(year)
        })
    }


    function syncAsideScroll() {
        comp.actionQueue.pushAction(
            () => {
                if (asideRef.elem) {
                    asideRef.elem.scrollToItem(
                        getDisplayed().year()
                    )
                }
            }
        )
    }

    function setYearRangeAnchor(yearAnchor: number) {
        context.yearAnchor = yearAnchor
    }

    return {
        setYearRangeAnchor,
        syncAsideScroll,

        render() {
            const displayedYear = getDisplayed().year()
            return (
                <UiAside
                    itemKeySelected={displayedYear}
                    onFetchPrev={
                        (firstItem: TypeAsideItem) => {
                            const currStartYear = +firstItem.key
                            return range(
                                currStartYear - 12,
                                currStartYear - 1
                            ).map(item => ({
                                key: item,
                                text: item,
                            }))
                        }
                    }
                    onFetchNext={
                        (lastItem: TypeAsideItem) => {
                            const currEndYear = +lastItem.key
                            return range(
                                currEndYear + 1,
                                currEndYear + 12
                            ).map(item => ({
                                key: item,
                                text: item,
                            }))
                        }
                    }
                    asideItems={
                        getYearList(
                            context.yearAnchor
                        )
                    }
                    onChange={handleYearChange}
                    ref={asideRef.ref}
                />
            )
        },

        extendApi<T extends Record<string, any> = Record<string, any>>(api: T) {
            return Object.assign(api, {
                setYearRangeAnchor,
                syncAsideScroll,
            })
        },
    }
}