import CalendarDateIcon from '@components/aisera-icons/custom/CalendarDateIcon';
import CloseIcon from '@components/aisera-icons/custom/CloseIcon';
import { Divider } from '@components/Divider/Divider';
import { ExpandMore, Refresh } from '@mui/icons-material';
import { FormControl, InputLabel, MenuItem, Select, SelectChangeEvent } from '@mui/material';
import dayjs from 'dayjs';
import React from 'react';
import CustomDateRangePopup from '../CustomeDateRangePopup/CustomDateRangePopup';
import { FilterData } from '../Filter';
import './single-select.scss';

export interface Option {
    label?: string;
    value: any;
    icon?: React.ReactNode;
    color?: string;
}

export interface SingleSelectProps {
    label: string;
    groupIndex: number | undefined;
    optionIndex: number | undefined;
    options: Option[];
    type: string;
    value: string;
    hideClearIcon: boolean;
    onClear: (groupIndex: number, optionIndex: number, filter: FilterData) => void;
    onChangeFilter: (filterData: FilterData) => void;
    defaultSelected?: any;
}

const SingleSelect = ({ options, type, label, value, groupIndex, optionIndex, defaultSelected, onClear, onChangeFilter, hideClearIcon }: SingleSelectProps) => {

    const [items, setItems] = React.useState<any[]>(options as Option[] | []);
    const [selectedValue, setSelectedValue] = React.useState<any>('');
    const [filterData, setFilterData] = React.useState<FilterData>({ field: value, operand: undefined, operator: '', type: type || '' });
    const [startDate, setStartDate] = React.useState<any>();
    const [endDate, setEndDate] = React.useState<any>();
    const [isEdit, setIsEdit] = React.useState<boolean>(false);
    const [openCustomDate, setOpenCustomDate] = React.useState(false);
    const [customDateLabel, setCustomDateLabel] = React.useState<string>('');
    const handleChange = (event: SelectChangeEvent) => {
        const newValue = event.target.value
        setSelectedValue(newValue);
    };
    const handleCustomDateClose = () => {
        setOpenCustomDate(false);
    };
    const handleMangeFilterOpen = () => {
        setOpenCustomDate(true);
    };


    const calculateTimestamp = (days: any) => {
        if (!days) {
            return;
        }
        let operand;
        const today = dayjs();
        const pastDate = today.subtract(days, 'day');
        const startDateTimeStamp = convertToCustomTimeStamp(today);
        const endDateTimeStamp = convertToCustomTimeStamp(pastDate);
        operand = [startDateTimeStamp, endDateTimeStamp];
        return operand;
    };

    const handleFilterData = () => {
        setStartDate(undefined);
        setEndDate(undefined);
        let operand: any = undefined;
        if (type === 'date_range') {
            if (selectedValue === 'custom_range') {
                return
            } else {
                operand = calculateTimestamp(selectedValue);
            }
        }
        else {
            operand = selectedValue;
        }

        const newFilterData: FilterData = {
            field: value,
            operand: operand,
            type: type,
            operator: type === 'date_range' ? 'BETWEEN' : '='
        };
        setFilterData(newFilterData as FilterData);
    }

    const getLabelFromValue = (value: string) => {
        const label = options.find(option => option.value === value);
        return label ? label.label : 'All';
    };
    const closeFilter = (groupIndex: number | undefined, optionIndex: number | undefined) => {
        setSelectedValue('');
        setFilterData((prevData) => ({
            ...prevData,
            operand: undefined
        }))
        if (groupIndex != undefined && optionIndex != null) {
            onClear(groupIndex, optionIndex, filterData);
        }

    }
    const convertToTimeStamp = (date: any, isStartDate: boolean) => {
        const dateObj = new Date(date);
        isStartDate ? dateObj.setHours(0, 0, 0, 0) : dateObj.setHours(23, 59, 59, 999);
        return dateObj.getTime();
    }

    const convertToCustomTimeStamp = (date: any) => {
        const dateObj = new Date(date);
        return dateObj.getTime();
    }

    const handleCustomDateChange = (startDate: any, endDate: any) => {
        if (startDate === undefined && endDate === undefined) {
            return;
        }
        const startTimeStamp = startDate ? convertToTimeStamp(startDate, true) : null;
        const endTimeStamp = endDate ? convertToTimeStamp(endDate, false) : null;
        setStartDate(startDate);
        setEndDate(endDate);
        let operand: any = undefined;
        let operator = '';
        if (startDate !== null && endDate !== null) {
            operand = [startTimeStamp, endTimeStamp];
            operator = 'BETWEEN'
            setCustomDateLabel(dayjs(startDate).format('MM/DD') + 'to' + dayjs(endDate).format('MM/DD/YYYY'))
        } else if (startDate && endDate === null) {
            operand = startTimeStamp
            operator = ">="
            setCustomDateLabel(dayjs(startDate).format('MM/DD/YYYY'))
        } else if (endDate && startDate === null) {
            operand = endTimeStamp
            operator = "<="
            setCustomDateLabel(dayjs(endDate).format('MM/DD/YYYY'))
        }
        const newFilterData: FilterData = {
            field: value,
            operand: operand,
            type: type,
            operator: operator
        };
        setFilterData(newFilterData as FilterData);
    }

    const handleEditDate = () => {
        setIsEdit(true);
    }

    const handleRefresh = (event: React.MouseEvent<HTMLDivElement>) => {
        event.stopPropagation();
        setFilterData((prevData) => ({
            ...prevData,
            operand: undefined
        }))
        setSelectedValue('');
        setCustomDateLabel('');
    }

    const handleIconClick = () => {

    }

    React.useEffect(() => {
        // calculate days difference
        if(typeof defaultSelected === 'object' && type === 'date_range'){  
            const startDate = dayjs(defaultSelected[0]);
            const endDate = dayjs(defaultSelected[1]);
            const differenceInDays = startDate.diff(endDate, 'day');
            setSelectedValue(differenceInDays);
        }else {
            setSelectedValue(defaultSelected)
        }
    }, []);

    React.useEffect(() => {
        handleFilterData();
    }, [selectedValue]);

    React.useEffect(() => {
        (filterData) ? onChangeFilter(filterData) : {};
    }, [filterData]);


    return (
        <div className="single-select-container" >
            <FormControl fullWidth>
                <InputLabel id={`singselect`}></InputLabel>
                <Select
                    labelId="demo-simple-select-label"
                    // id="demo-simple-select"
                    id={'demo-simple-select'}
                    displayEmpty={true}
                    value={selectedValue}
                    onChange={handleChange}
                    IconComponent={type === 'date_range' ? 'span' : ExpandMore}
                    endAdornment={
                        // <>{type === 'date_range' ? <div className='calander-icon' onClick={handleIconClick}><CalendarDateIcon /></div> : <></>}
                        <>{type === 'date_range' ? <CalendarDateIcon />: <></>}
                            <div className='badge-refresh' onClick={handleRefresh}><Refresh className='refresh-hover-icon'></Refresh></div></>
                    }
                    startAdornment={!hideClearIcon && (<div className='input-start-adornment'>
                        <div className="close-icon" onClick={() => closeFilter(groupIndex, optionIndex)}>
                            <CloseIcon></CloseIcon></div>
                    </div>)}

                    renderValue={(selectedValue: string) =>
                    (
                        <div className="input-field">
                            <div className="label">{label}:</div>
                            <div className="selected-val">
                                {selectedValue !== 'custom_range' ? (
                                    <div >{getLabelFromValue(selectedValue)}</div>
                                ) : (
                                    <div >{customDateLabel}</div>
                                )}
                            </div>

                        </div>
                    )}

                    MenuProps={{
                        anchorOrigin: {
                            vertical: "bottom",
                            horizontal: "left",
                        },
                        transformOrigin: {
                            vertical: "top",
                            horizontal: "left",
                        },
                        className: "single-select-menu-prop",
                    }}
                >
                    {items?.map((item, index) => (
                        <MenuItem key={index} value={item.value} >
                            {item.label}
                        </MenuItem>
                    ))}

                    {type === 'date_range' && (<Divider></Divider>)}
                    {type === 'date_range' && (
                        <MenuItem className='custom-date' key="custom_range" value={'custom_range'} onClick={handleMangeFilterOpen} disableRipple>
                            <div>Custom Range</div>
                            {startDate && endDate && (<div onClick={handleEditDate}>Edit</div>)}
                        </MenuItem>

                    )}
                </Select>
            </FormControl>

            <div className="custom-date-filter">
                {openCustomDate && (
                    <CustomDateRangePopup
                        id={'custom-date-range-popup'}
                        keepMounted={false}
                        value={''}
                        open={openCustomDate}
                        onClose={handleCustomDateClose}
                        startDate={startDate}
                        endDate={endDate}
                        onChangeDate={handleCustomDateChange} />
                )}
            </div>
        </div>
    )
}

export default SingleSelect