import { useEffect, useState } from "react";
import { dateFormats, dateTimeFormats, monthFormats, timeFormats, weekFormats, yearFormats } from "../../../../utlity/dateTimeFormats";
import { DROPDOWNTOGGLE, TEMPORAL } from "./RightSideBar";
import { MdKeyboardArrowDown } from "react-icons/md";
import dayjs from "dayjs";
import { DroppedItem } from "../../../../utlity/types";

const dateTimeFormatMap = {
    "date": dateFormats,
    "time": timeFormats,
    "date_time": dateTimeFormats,
    "year": yearFormats,
    "month": monthFormats,
    "week": weekFormats
}

interface TemporalDateAttrInt {
    dateFormat: string;
    format: string | undefined;
    selectedTag: DroppedItem;
    dropDownToggle: DROPDOWNTOGGLE | null;
    setDropDownToggle: React.Dispatch<React.SetStateAction<DROPDOWNTOGGLE | null>>;
    handlePropertyChange: (changeTo: string, changeWith: string | boolean | number, is24Hrs: boolean) => void;
}

const TemporalDateAttr: React.FC<TemporalDateAttrInt> = ({ dateFormat, format, selectedTag, dropDownToggle, setDropDownToggle, handlePropertyChange }) => {

    console.log(dateFormat, format, "dateFormat Line 26", selectedTag)

    const [is24Hrs, setIs24Hrs] = useState<boolean>(true);

    const handleIs24HrsClick = (checked: boolean) => {
        if (dateFormat === TEMPORAL.TIME) {
            if (!checked) {
                handlePropertyChange("format", timeFormats[1].format, is24Hrs)
            } else {
                handlePropertyChange("format", timeFormats[0].format, is24Hrs)
            }
        }
        else if (dateFormat === TEMPORAL.DATE_TIME) {
            handlePropertyChange("format", (format.split(" ").slice(0, -1).join(" ")), !is24Hrs)
        }
        setIs24Hrs(checked)
    }

    useEffect(() => {
        if (format === timeFormats[1].format && is24Hrs) {
            setIs24Hrs(false);
        } else if (format === timeFormats[0].format && !is24Hrs) {
            setIs24Hrs(true);
        }
    }, [format])

    return (
        <div>
            <div className="flex justify-between">
                <label htmlFor="" className="">Formats</label>
                {(dateFormat === TEMPORAL.DATE_TIME || dateFormat === TEMPORAL.TIME) &&
                    <div className="flex justify-center items-center gap-1.5">
                        <input
                            checked={is24Hrs ? is24Hrs : false}
                            onChange={(e) => handleIs24HrsClick(e.target.checked)}
                            id="data_time_format"
                            type="checkbox" />
                        <label className={`text-xs ${is24Hrs ? "text-slate-600" : "text-slate-400"} transitions-all duration-150`} htmlFor="data_time_format">
                            24 Hrs
                        </label>
                    </div>
                }
            </div>

            <div
                onClick={() => setDropDownToggle(dropDownToggle === DROPDOWNTOGGLE.DDMMYY_FORMAT ? null : DROPDOWNTOGGLE.DDMMYY_FORMAT)}
                className="flex justify-between items-center border-1 rounded px-2 py-1 border-slate-200">
                <p className="cursor-pointer py-1">
                    {format ? format : dateTimeFormatMap['date'][0].format}
                    {/* {(dateFormat !== TEMPORAL.DATE && dateFormat !== TEMPORAL.TIME) ? (is24Hrs ? " " + timeFormats[0].format : " " + timeFormats[1].format) : ""} */}
                </p>
                <MdKeyboardArrowDown />
            </div>

            {
                dropDownToggle === DROPDOWNTOGGLE.DDMMYY_FORMAT &&
                <div className="shadow bg-slate-100 mt-1 border-[1px] max-h-[200px] overflow-y-auto border-slate-100 rounded">
                    {dateTimeFormatMap[dateFormat].map((valObj, indx) => {
                        // let val = showFormatEg ? valObj["example"] : valObj["format"]
                        let val = valObj["format"]
                        if (dateFormat === TEMPORAL.DATE_TIME) {
                            if (is24Hrs) {
                                val = val + " " + timeFormats[0].format;
                            } else {
                                val = val + " " + timeFormats[1].format;
                            }
                        }
                        console.log('line 89', val)
                        return (
                            <div
                                key={indx}
                                onClick={() => handlePropertyChange("format", val, is24Hrs)}
                                className="px-2 py-1 hover:bg-slate-200 cursor-pointer"
                            >
                                {val}
                            </div>
                        )
                    }
                    )}
                </div>
            }

            {format && <div className="pt-4">
                <p className="text-center">{dayjs().format(format)}</p>
            </div>}
        </div>
    )
}

export default TemporalDateAttr