import { QuestionCircleOutlined } from "@ant-design/icons"
import { InputNumber, Space, Tooltip } from "antd"
import React, { useEffect, useState } from "react"


interface Props {
    value?: [number | undefined, number | undefined]
    onChange?: (value?: [number | undefined, number | undefined]) => void
    tips?: string
}
/**
 * 时间区间
 * @returns 
 */
const IntervalTime: React.FC<Props> = ({ value = [undefined, undefined], onChange, tips }) => {

    /********************************************/
    const [data, setData] = useState<[number | undefined, number | undefined]>([undefined, undefined])
    /********************************************/

    useEffect(() => {
        let [val1, val2] = value
        let [data1, data2] = data
        if ((val1 && val1 !== data1) || (val2 && val2 !== data2)) {
            setData([val1, val2])
        }
    }, [value, data])

    const handleOk = (value: number, index: number) => {
        let newData = JSON.parse(JSON.stringify(data))
        newData[index] = value
        setData(newData)
        onChange?.(newData)
    }

    return <Space>
        <InputNumber value={data[0]} style={{ width: 90 }} min={0} placeholder="最小间隔" onChange={(num) => handleOk(num, 0)} />
        ~
        <InputNumber value={data[1]} style={{ width: 90 }} min={0} placeholder="最大间隔" onChange={(num) => handleOk(num, 1)} />
        {tips && <Tooltip title={tips}>
            <QuestionCircleOutlined />
        </Tooltip>}
    </Space>
}

export default React.memo(IntervalTime)