import {Component} from 'react'
import {brk} from '@befe/brick-utils'
import {
    TypeItemEvent,
    TypeItemStatus,
    TypeLayoutItem,
} from '../module-defs/ui-types'

export type TypeItemProps = TypeLayoutItem & TypeItemStatus & TypeItemEvent & { value?: number };

interface TypeItemState {
    isHover: boolean
    isActive: boolean
}

/**
 */
export class UILayoutItem extends Component<TypeItemProps, TypeItemState> {

    state: TypeItemState = {
        isHover: false,
        isActive: false,
    }

    handleMouseEnter = () => {
        const props = this.props
        const {onMouseEnter} = props

        onMouseEnter && onMouseEnter(props.value)

        this.setState({
            isHover: true,
            isActive: false,
        })
    }

    handleMouseLeave = () => {
        const onmouseleave = this.props.onMouseLeave
        onmouseleave && onmouseleave()
        this.setState({isHover: false})
    }

    handleMouseDown = () => {
        this.setState({isActive: true})
    }

    handleMouseUp = () => {
        this.setState({isActive: false})
    }

    handleClick = () => {
        const props = this.props
        if (props.outside) {
            if (!props.disabled) {
                props.onClickOutside && props.onClickOutside(props.value)
            }
        } else if (!props.disabled) {
            props.onClick && props.onClick(props.value)
        }
    }

    get actionStatus() {
        const state = this.state
        return state.isActive && state.isHover ? 'active'
            : state.isHover ? 'hover'
                : 'default'
    }

    render() {
        const props = this.props

        return (
            <div
                className={brk('content-item')}
                data-action-status={this.actionStatus}
                data-outside={props.outside}
                data-disabled={props.disabled}
                data-selected={props.selected}
                data-range-type={props.rangeType}
                data-today={props.today}
                onMouseEnter={this.handleMouseEnter}
                onMouseLeave={this.handleMouseLeave}
                onMouseDown={this.handleMouseDown}
                onMouseUp={this.handleMouseUp}
                onClick={this.handleClick}
            >
                <span>{props.text}</span>
                {/* <span className={brk('item-text')}>{props.text}</span> */}
            </div>
        )
    }
}