/* eslint-disable @typescript-eslint/no-empty-interface */
import {ConfiguredComponent} from '@befe/brick-core'
import dayjs, {Dayjs} from 'dayjs'
import {safeInvoke} from '@befe/brick-utils'
import {UiPanel} from '../../ui-comps/ui-panel'
import {UiPanelTitle} from '../../ui-comps/ui-panel-title'
import {UiItemLayout} from '../../ui-comps/ui-item-layout'
import {getDateRows, getWeekTitleRow} from '../../utils/date-utils'
import {UILayoutItem} from '../../ui-comps/ui-item'
import {TypeLayoutItem} from '../../module-defs/ui-types'
import {localeDictDatePicker} from '../../locale'

interface MultiDatePanelProps {
    value: number[]
    displayedDate: Dayjs
    hideNow?: boolean
    getDisabledItem?: (date: Dayjs, firstDayOfCurrentUnit: Dayjs) => boolean
    onPrevYear: () => void
    onNextYear: () => void
    onPrevMonth: () => void
    onNextMonth: () => void
    onToggleZooming: () => void
    onClick: (value?: number) => void
}

/**
 */
export class MultiDatePanel extends ConfiguredComponent<MultiDatePanelProps> {
    componentLocale = localeDictDatePicker

    render() {
        return (
            <UiPanel
                titleElem={this.renderPanelTitle()}
                contentElem={this.renderPanelContent()}
                contentType={'date'}
            />
        )
    }

    private renderPanelTitle() {
        const yearMonthTitle = this.getLocaleText(
            'get_year_month_title',
            // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
            this.props.displayedDate as any
        )

        return (
            <UiPanelTitle
                text={yearMonthTitle}
                withZoomingIcon
                isZooming={false}
                shouldShowInner
                rangeControl={'none'}
                rangeShowType={'both'}
                onFastLeftClick={this.props.onPrevYear}
                onFastRightClick={this.props.onNextYear}
                onPlainLeftClick={this.props.onPrevMonth}
                onPlainRightClick={this.props.onNextMonth}
                onZoomingClick={this.props.onToggleZooming}
            />
        )
    }

    private readonly getWeekDayText = (day: number) => {
        // console.log('why')
        return this.getLocaleText('get_week_day_text', day)
    }

    private renderPanelContent() {
        const date = this.props.displayedDate
        const year = date.year()
        const month = date.month()

        const today = dayjs().startOf('day')
        const boundRenderItem = this.renderItem.bind(this, {
            todayValue: today.valueOf(),
            today,
        })

        return (
            <UiItemLayout
                titleRow={getWeekTitleRow({getWeekDayText: this.getWeekDayText})}
                rows={getDateRows(year, month)}
                // eslint-disable-next-line react/jsx-no-bind
                renderItem={boundRenderItem}
            />
        )
    }

    private renderItem(
        {
            todayValue,
            today,
        }: {
            todayValue: number
            today: Dayjs
        },
        item: TypeLayoutItem
    ) {
        const itemData = item.data!
        const itemValue = itemData.date.valueOf()
        const selected = this.props.value.includes(itemValue)
        const hideNow = this.props.hideNow
        const isDisabled = safeInvoke(
            this.props.getDisabledItem,
            itemData.date,
            today
        )

        return {
            elem: <UILayoutItem
                key={item.key}
                value={itemValue}
                selected={selected}
                disabled={isDisabled}
                text={item.text}
                outside={itemData.outside}
                today={!hideNow && itemValue === todayValue}
                onClick={this.props.onClick}
            />,
        }
    }
}