import Button from "@components/Button/Button";
import { DatePicker } from "@components/DatePicker/DatePicker";
import { Dialog, DialogActions, DialogContent, DialogTitle, Typography } from "@mui/material";
import React from "react";
import './custom-date-rang-popup.scss';


export interface CustomDateRangeProps {
    id: string;
    keepMounted: boolean;
    value: string;
    open: boolean;
    onClose: () => void;
    startDate: string;
    endDate: string;
    onChangeDate: (startDate: any, endDate: any) => void;
}

const CustomDateRangePopup = (props: CustomDateRangeProps) => {
    const {
        onClose,
        value: valueProp,
        open,
        startDate,
        endDate,
        onChangeDate,
        ...other
    } = props;
    const [selectedStartDate, setSelectedStartDate] = React.useState<any>();
    const [selectedEndDate, setSelectedEndDate] = React.useState<any>();
    const handleCancel = () => {
        onClose();
    };
    const handleStateDate = (date: any) => {
        setSelectedStartDate(date);
    }
    const handleEndDate = (date: any) => {
        setSelectedEndDate(date);
    }
    const handleOnClickOk = () => {
        onChangeDate(selectedStartDate, selectedEndDate);
        handleCancel();
    }
    return (
        <div className='custom-date-range-container'>
            <Dialog id={"custom-date-range-popup"} open={open}>
                <DialogTitle>Custom Range</DialogTitle>
                <DialogContent dividers>
                    <div className="date-form">
                        <div className="date-field">
                            <Typography className="date-label">Start Date</Typography>
                            <DatePicker defaultDate={startDate} onChangeDate={handleStateDate}></DatePicker>
                        </div>
                        <div className="date-field">
                            <Typography className="date-label">End Date</Typography>
                            <DatePicker defaultDate={endDate} onChangeDate={handleEndDate}></DatePicker>
                        </div>
                    </div>
                </DialogContent>
                <DialogActions>
                    <Button autoFocus label="Cancel" onClick={handleCancel}></Button>
                    <Button label="OK" onClick={handleOnClickOk}></Button>
                </DialogActions>
            </Dialog>
        </div>
    )
}

export default CustomDateRangePopup