import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
import { Box, Button, FormControl, forwardRef, HStack, Select, } from "@chakra-ui/react";
import { css, Global } from "@emotion/react";
import dayjs from "dayjs";
import React from "react";
import ReactDatePicker from "react-datepicker";
export const CustomDatePicker = (props) => {
    const [startDate, setStartDate] = React.useState(props.start);
    const [endDate, setEndDate] = React.useState(props.end);
    const onChange = (dates) => {
        const [start, end] = dates;
        setStartDate(start);
        setEndDate(end);
        if (end)
            props.onChange([start, end]);
    };
    React.useEffect(() => {
        if (props.type === "month" || props.type === "quarter") {
            const start = dayjs(`1/2/${startDate.getFullYear()}`).toDate();
            const end = dayjs(`1/1/${startDate.getFullYear() + 1}`).toDate();
            setEndDate(end);
            props.onChange([start, end]);
        }
    }, [props.type]);
    switch (props.type) {
        case "year":
            return (_jsx(Box, { children: _jsxs(HStack, { children: [_jsx(FormControl, { children: _jsx(Select, Object.assign({ value: startDate.getFullYear(), onChange: (e) => {
                                    const start = dayjs(`1/2/${e.target.value}`).toDate();
                                    setStartDate(start);
                                    props.onChange([start, endDate]);
                                }, size: "xs" }, { children: Array.from({ length: 11 }, (_, idx) => ({
                                    label: Math.abs(new Date().getFullYear() + 5 - idx),
                                    value: Math.abs(new Date().getFullYear() + 5 - idx),
                                })).map((s) => (_jsx("option", Object.assign({ value: s.value }, { children: s.label }), s.value))) })) }), _jsx(Box, { children: " - " }), _jsx(FormControl, { children: _jsx(Select, Object.assign({ value: endDate.getFullYear(), onChange: (e) => {
                                    const end = dayjs(`1/2/${e.target.value}`).toDate();
                                    setEndDate(dayjs(end).toDate());
                                    props.onChange([startDate, end]);
                                }, size: "xs" }, { children: Array.from({ length: 11 }, (_, idx) => ({
                                    label: Math.abs(new Date().getFullYear() + 5 - idx),
                                    value: Math.abs(new Date().getFullYear() + 5 - idx),
                                })).map((s) => (_jsx("option", Object.assign({ value: s.value }, { children: s.label }), s.value))) })) })] }) }));
        case "quarter":
        case "month":
            return (_jsx(Box, Object.assign({ w: "100%" }, { children: _jsx(FormControl, { children: _jsxs(Select, Object.assign({ value: startDate.getFullYear() === new Date().getFullYear()
                            ? "this_year"
                            : startDate.getFullYear() === new Date().getFullYear() - 1
                                ? "last_year"
                                : "next_year", onChange: (e) => {
                            const startTemplate = "1/2/";
                            const endTemplate = "1/1/";
                            const thisYear = new Date().getFullYear();
                            switch (e.target.value) {
                                case "last_year": {
                                    const startLastYear = dayjs(startTemplate + (thisYear - 1)).toDate();
                                    const endLastYear = dayjs(endTemplate + thisYear).toDate();
                                    setStartDate(startLastYear);
                                    setEndDate(endLastYear);
                                    props.onChange([startLastYear, endLastYear]);
                                    break;
                                }
                                case "next_year": {
                                    const startNextYear = dayjs(startTemplate + (thisYear + 1)).toDate();
                                    const endNextYear = dayjs(endTemplate + (thisYear + 2)).toDate();
                                    setStartDate(startNextYear);
                                    setEndDate(endNextYear);
                                    props.onChange([startNextYear, endNextYear]);
                                    break;
                                }
                                case "this_year":
                                default: {
                                    const startThisYear = dayjs(startTemplate + thisYear).toDate();
                                    const endThisYear = dayjs(endTemplate + (thisYear + 1)).toDate();
                                    setStartDate(startThisYear);
                                    setEndDate(endThisYear);
                                    props.onChange([startThisYear, endThisYear]);
                                    break;
                                }
                            }
                        }, size: "xs" }, { children: [_jsx("option", Object.assign({ value: "this_year" }, { children: "This year" })), _jsx("option", Object.assign({ value: "last_year" }, { children: "Last year" })), _jsx("option", Object.assign({ value: "next_year" }, { children: "Next year" }))] })) }) })));
        case "day":
        default:
            return (_jsxs(_Fragment, { children: [_jsx(Global, { styles: css `
              @import "https://unpkg.com/react-datepicker@4.7.0/dist/react-datepicker.css";
            ` }), _jsx(ReactDatePicker, { selected: startDate, onChange: onChange, startDate: startDate, endDate: endDate, selectsRange: true, dateFormat: "dd/MM/yyyy", customInput: _jsx(CustomInput, { size: props.size }) })] }));
    }
};
const CustomInput = forwardRef(({ value, onClick, size }, ref) => {
    return (_jsx(Button, Object.assign({ size: size, justifyContent: "space-between", borderRadius: "md", variant: "outline", width: "100%", _focus: { shadow: "0px" }, 
        // rightIcon={<IconCalendar />}
        onClick: onClick, ref: ref, fontWeight: "normal" }, { children: value || "Hello" })));
});
//# sourceMappingURL=CustomDatePicker.js.map