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

export type TimeSelectProps = {
	value: number;
	className?: string;
	onChange: (value: number) => void;
}
type OptionItem = {
	label: string;
	value: number;
}

const TimeSelect = (props: TimeSelectProps) => {
	const {t,i18n} = useTranslation();
	const AllTimeOption: OptionItem[] = useMemo(()=>([
		{
			label: t('time_filter.past_30_min'),
			value: 1
		},
		{
			label: t('time_filter.past_hour'),
			value: 2
		},
		{
			label: t('time_filter.past_4_hour'),
			value: 3
		},
		{
			label: t('time_filter.past_24_hour'),
			value: 4
		},
		{
			label: t('time_filter.last_week'),
			value: 5
		},
		{
			label: t('time_filter.all'),
			value: 0
		}
	]),[i18n.language])
	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