import React from 'react';
import { DatePicker, Space } from 'antd';
import { makeStyles } from 'tss-react/mui';
import { cn } from '@/lib/utils';
import { PATTERNS } from '@/lib/appConstant';
import dayjs from 'dayjs';
// import FormItemLabel from 'antd/es/form/FormItemLabel';

const { RangePicker } = DatePicker;

type PropsType = {
    label?: string;
    classNames?: string;
    name?: string;
    typePicker?: 'date' | 'month' | 'year' | null;
    size?: number;
    style: React.CSSProperties | undefined;
    onChange?: any;
    value?: any;
    suffixIcon?: any;
}


const useStyle = makeStyles()(() => ({
    container: {
        borderRadius: `0 !important`,
        height: `38px !important`,
        margin: `0.5rem 0`,
        '& input': {
            textAlign: 'center'
        },
        // '& .ant-select-arrow': {
        //   top: '50%',
        //   // width: '100%',
        //   // display: 'flex',
        //   // justifyContent: 'center',
        //   // alignItems: 'center',
        //   // transform: translateY(-50%),
        // },
    }
}));

const dateFormat = PATTERNS.DATE_FORMAT;
const monthFormat = PATTERNS.MONTH_FORMAT;
const yearFormat = PATTERNS.YEAR_FORMAT;

const InputDateRangePicker = (props: PropsType) => {
    const {
        label,
        typePicker ='date',
        size = 12,
        value,
        style = {},
        classNames,
        onChange,
    } = props;
    const { classes } = useStyle();

    const getDateFormat = (): string => {
        switch (typePicker) {
            case 'month':
                return monthFormat;
        
            case 'year':
                return yearFormat;
        
            default:
                return dateFormat;
        }
    };

    const handleChange = (dates: any, dateStrings: any) => {
        if (onChange && dateStrings) {
            const format = getDateFormat();
            const formattedDates = dateStrings.map((date: any) => date ? dayjs(date, format) : null);
            onChange(formattedDates);
        }
    };


    if (typePicker) {
        return (
            <Space direction="vertical" size={size} style={{ width: '100%' }}>
                <RangePicker
                    className={cn(classes.container, classNames)}
                    style={style}
                    value={value ? value : [null, null]}
                    format={getDateFormat()}
                    suffixIcon={null}
                    onChange={handleChange}
                    picker={typePicker}
                    id={{
                        start: 'startDate',
                        end: 'endDate',
                    }}
                />
            </Space>
        );
    }

    return (
        <Space direction="vertical" size={size} style={{ width: '100%' }}>
            {
                label && <label htmlFor="">{label}</label>
            }
            <RangePicker
                showTime
                className={cn(classes.container, classNames)}
                style={style}
                value={value ? value : [null, null]}
                suffixIcon={null}
                format={getDateFormat()}
                onChange={handleChange}
                id={{
                    start: 'startDate',
                    end: 'endDate',
                }}
            />
        </Space>
    );
}
export default InputDateRangePicker;