import React from "react";
import { DateRange } from "./implementation/types";
import { DateRangePicker as MuiDateRangePicker } from "./implementation/picker.wrapper";
import { Backdrop, Fade, IconButton, Popover, TextField, TextFieldProps } from "@mui/material";
import { DateRange as DateRangeIcon } from "@mui/icons-material";
import { dateFormat } from "sync-ql";

export type DateRangePickerProps = {
    value: [Date | null, Date | null];
    minDate?: Date | string;
    maxDate?: Date | string;
    format?: string;
    TextFieldProps?: TextFieldProps;
    onChange: (dateRange: [Date | null, Date | null]) => void;
};
export const DateRangePicker: React.FC<DateRangePickerProps> = ({ minDate, maxDate, value, format, TextFieldProps, onChange }) => {
    const anchor = React.useRef<any>();
    const [open, setOpen] = React.useState(false);

    const toDateRange = (dateRange: [Date | null, Date | null]): DateRange => {
        return {
            startDate: dateRange && dateRange.length > 0
                ? dateRange[0] as any
                : undefined,
            endDate: dateRange && dateRange.length > 1
                ? dateRange[1] as any
                : undefined,
        }
    }
    const dateRange = toDateRange(value);

    const getDisplayDateRange = (dateRange: DateRange): string => {
        const startDate = dateRange?.startDate
            ? dateFormat(dateRange.startDate, format ?? "yyyy-MM-dd")
            : undefined;

        const endDate = dateRange?.endDate
            ? dateFormat(dateRange.endDate, format ?? "yyyy-MM-dd")
            : undefined;

        return startDate || endDate ? `${startDate} - ${endDate}` : "";
    };

    const handleToggle = () => {
        setOpen(!open);
    }
    const handleChange = (range: DateRange) => {
        onChange([range?.startDate, range?.endDate] as any);
        handleToggle();
    }

    return (
        <>
            <TextField
                {...TextFieldProps}
                value={getDisplayDateRange(dateRange)}
                onClick={handleToggle}
                InputProps={{
                    ...TextFieldProps?.InputProps,
                    readOnly: true,
                    endAdornment: (
                        <IconButton ref={anchor}>
                            <DateRangeIcon />
                        </IconButton>
                    )
                }}
            />
            <Popover
                style={{
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center"
                }}
                open={open}
                anchorEl={anchor.current}
                anchorOrigin={{
                    vertical: 'bottom',
                    horizontal: 'right',
                }}
                transformOrigin={{
                    vertical: 'top',
                    horizontal: 'right',
                }}
                closeAfterTransition
                BackdropComponent={Backdrop}
                BackdropProps={{
                    timeout: 500
                }}
            >
                <Fade in={open}>
                    <div>
                        <MuiDateRangePicker
                            open={true}
                            toggle={handleToggle}
                            onChange={handleChange}
                            initialDateRange={dateRange}
                            minDate={minDate}
                            maxDate={maxDate}
                        />
                    </div>
                </Fade>
            </Popover>
        </>
    );
};