import {useMemo, useState} from "react";
import {CaretUpOutlined} from "@ant-design/icons";

export type TimeSelectProps = {
	value: number;
	className?: string;
	onChange: (value: number) => void;
}
type OptionItem = {
	label: string;
	value: number;
}
const AllTimeOption: OptionItem[] = [
	{
		label: '半小时内',
		value: 1
	},
	{
		label: '一小时内',
		value: 2
	},
	{
		label: '四小时内',
		value: 3
	},
	{
		label: '一天内',
		value: 4
	},
	{
		label: '近一周',
		value: 5
	},
	{
		label: '所有时间',
		value: 0
	}
]
const TimeSelect = (props: TimeSelectProps) => {
	const selectLabel = useMemo(() => {
		return AllTimeOption.find(item => item.value == props.value)?.label || ''
	}, [props.value])
	const [visible, setVisible] = useState<boolean>(false);
	const handleClick = (item: OptionItem) => {
		setVisible(false)
		props.onChange(item.value)
	}

	return (<div className={`timer-select-container relative group ${props.className}`}
	             onMouseLeave={() => setVisible(false)}>
		<div className={`timer-select-value flex items-center`} onMouseEnter={() => setVisible(true)}>
			<div>
				<span>{selectLabel}</span>
				<CaretUpOutlined className={'ml-2 arrow-icon rotate-180 group-hover:rotate-0'} />
			</div>
		</div>
		<div className={`timer-select-options z-10 ${visible ? 'block' : 'hidden'}`}>
			{AllTimeOption.map((item, index) => {
				return <div className={`timer-select-option-item ${item.value == props.value?'selected':''}`} key={index}
				            onClick={() => handleClick(item)}>{item.label}</div>
			})}
		</div>
	</div>)
}
export default TimeSelect