import {Component, MouseEventHandler} from 'react'
import {
    createDelayActionQueue,
    range,
} from '@befe/brick-utils'
import cx from 'classnames'
import {cls} from '../utils/cls'
import {
    COL_NAMES,
    TypeRange,
} from '../defs/types'
import {PartialTimeCol} from './create-time-panel-col'

export interface UiPanelProps {
    className?: string

    hour?: number
    minute?: number
    second?: number

    onChange: (propName: typeof COL_NAMES[number], value: number) => void
    onClick?: MouseEventHandler
    onMouseEnter?: MouseEventHandler
    onMouseLeave?: MouseEventHandler

    getDisabledRangeList?: () => TypeRange[]
    getDisabledRange?: () => TypeRange

    showSecond?: boolean

    refWrapper?: (node: HTMLDivElement) => void
}

function getNumberList(end: number) {
    return range(
        0, end
    ).map(i => ({key: i, text: i < 10 ? `0${i}` : String(i)}))
}

export class UiTimePanel extends Component<UiPanelProps> {

    /**
     * 用于渲染时间选择器内的 "可选值列表",
     * 由于 时, 分, 秒 都是固定的, 所以不需要考虑动态变量
     */
    static list = {
        hour: getNumberList(23),
        minute: getNumberList(59),
        second: getNumberList(59),
    }

    static defaultProps: Partial<UiPanelProps> = {
        showSecond: false,
    }

    actionQueue = createDelayActionQueue()

    cols = {
        // eslint-disable-next-line @typescript-eslint/no-use-before-define
        hour: new PartialTimeCol(this, 'hour'),
        // eslint-disable-next-line @typescript-eslint/no-use-before-define
        minute: new PartialTimeCol(this, 'minute'),
        // eslint-disable-next-line @typescript-eslint/no-use-before-define
        second: new PartialTimeCol(this, 'second'),
    }

    _scrollToSelected = () => {
        COL_NAMES.forEach(
            name => this.cols[name].scrollToSelected()
        )
    }

    scrollToSelected = () => {
        this.actionQueue.pushAction(() => {
            this._scrollToSelected()
        }, 'scroll')
    }

    componentDidMount(): void {
        this.actionQueue.execute()
        this._scrollToSelected()
    }

    componentDidUpdate(): void {
        this.actionQueue.execute()
    }

    render() {
        const {
            showSecond,
        } = this.props

        const {
            hour,
            minute,
            second,
        } = this.cols

        // console.log('time picker', this.props)
        const {onClick, onMouseEnter, onMouseLeave} = this.props

        return (
            <div
                ref={this.props.refWrapper}
                className={cx(
                    cls('panel-wrapper'),
                    showSecond && 'with-second',
                    this.props.className
                )}
                onClick={onClick}
                onMouseEnter={onMouseEnter}
                onMouseLeave={onMouseLeave}
            >
                {hour.renderCol()}
                {minute.renderCol()}
                {this.renderSecondCol(second, showSecond)}
            </div>
        )
    }

    private renderSecondCol(
        secondCol: PartialTimeCol,
        showSecond?: boolean
    ) {
        if (!showSecond) {
            return null
        }

        return secondCol.renderCol()
    }
}