'use client'

import React, { useEffect, useState } from 'react';
import { TimePicker } from 'antd';
import { DownOutlined } from '@ant-design/icons';

export const CustomTimePicker = (props: any) => {
    const { label, value, ...other } = props;
    const [isActiveLabel, setIsActiveLabel] = useState<boolean>(false);

    useEffect(() => {
        if (label) {
            setIsActiveLabel(!!value);
        } else {
            setIsActiveLabel(false);
        }
    }, [value]);

    const onOpenChange = (open: boolean) => {
        if (open) {
            if (!isActiveLabel) setIsActiveLabel(true)
        } else {
            setIsActiveLabel(!!value)
        }
    };

    return (
        <div className={`b-timepicker-wrap ${isActiveLabel ? 'b-timepicker__active' : ''}`}>
            <div className="b-timepicker-label">
                <span>{label}</span>
            </div>
            <TimePicker
                className="b-timepicker"
                format="HH:mm"
                minuteStep={15}
                value={value}
                showNow={false}
                onOpenChange={onOpenChange}
                needConfirm={false}
                placeholder=""
                variant="filled"
                allowClear={false}
                suffixIcon={<DownOutlined style={{ color: '#2c7873', fontSize: 12 }} />}
                {...other}
            />
        </div>
    );
};