import { MdKeyboardArrowDown } from "react-icons/md";
import { DroppedItemsObj } from "./DocumentContainer";
import React, { ReactHTMLElement, useEffect, useState } from "react";


import { RiAsterisk } from "react-icons/ri";
import { GoDotFill } from "react-icons/go";
import { IoClose } from "react-icons/io5";
import { LuAsterisk } from "react-icons/lu";
import { dateFormats, dateTimeFormats, monthFormats, timeFormats, weekFormats, yearFormats } from "../../../utlity/dateTimeUtils";
import { DroppedItem } from "../../../utlity/types";
import { IoMdClose } from "react-icons/io";
import dayjs from "dayjs";

interface DroppedItemProps {
    selectedTag: DroppedItem
    setDroppedItems: React.Dispatch<React.SetStateAction<DroppedItemsObj>>
    selTagKey: string,
    selTagIndx: number
}

enum TEXT {
    PARAGRAPH = "paragraph",
    SINGLE_LINE = "single_line",
    PASSWORD = "password",
}
// enum SIGNATURE {
//     TYPED = "typed",
//     DRAW = "draw",
//     UPLOAD = "upload",
// }
// enum INITIALS {
//     TYPED = "typed",
//     DRAW = "draw",
//     UPLOAD = "upload",
// }
export enum TEMPORAL {
    DATE = "date",
    TIME = "time",
    DATE_TIME = "date_time",
    // YEAR = "year",
    // MONTH = "month",
    // WEEK = "week",
}

enum NUMBER {
    INTEGER = "integer",
    DECIMAL = "decimal",
    CURRENCY = "currency"
}
// enum IMAGE {
//     STAMP = "stamp",
//     LOGO = "logo"
// }

enum SELECT {
    SINGLE_SELECT = "single select",
    MULTI_SELECT = "multi select"
}


enum MASKTYPE {
    ALL = "all",
    LAST_FOUR = "last_four",
    CREDIT_CARD = "credit_Card",
    NATIONAL_INSURANCE = "national_insurance",
    SOCIAL_SECURITY = "social_security",
    SOCIAL_INSURANCE = "social_insurance"
}

enum MASKCHARACTER {
    ASTERISK = "ASTERISK",
    DOT = "DOT",
    X = "CROSS",
}

const enumMap = {
    text: TEXT,
    temporal: TEMPORAL,
    number: NUMBER,
    image: String,
    select: SELECT
}

enum DROPDOWNTOGGLE {
    TYPE,
    MASK_TYPE,
    MASK_CHARACTER,
    DDMMYY_FORMAT
}

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

const RightSideBar: React.FC<DroppedItemProps> = ({ selectedTag, setDroppedItems, selTagKey, selTagIndx }) => {
    console.log(selectedTag, "selectedTag Line 102")
    const selectedType = selectedTag.type in enumMap && enumMap[selectedTag.type as keyof typeof enumMap];
    const [dropDownToggle, setDropDownToggle] = useState<DROPDOWNTOGGLE | null>(null);

    // const [showFormatEg, setShowFormatEg] = useState<boolean>(false);
    const [is24Hrs, setIs24Hrs] = useState<boolean>(true);
    const [isCurrentTimeStamp, setIsCurrentTimeStamp] = useState<boolean>(true);

    // const [selectedOptions, setSelectedOptions] = useState<string[]>([])

    const [decimalPlace, setDecimalPlace] = useState<number>(2)
    const [selectedOption, setSelectedOption] = useState<string>()

    const handlePropertyChange = (changeTo: string, changeWith: string | boolean | number) => {
        console.log("Handle Property Change Called", "changeTo", changeTo, "changeWith", changeWith)
        if (changeTo === '' || changeWith === '') return

        if (changeTo === "subType" && (changeWith === TEMPORAL.DATE || changeWith === TEMPORAL.DATE_TIME || changeWith === TEMPORAL.TIME)) {
            // let change: string = changeWith;
            // if (change === "DATE TIME") {
            //     change = "DATE_TIME"
            // }
            setDroppedItems((prev) => (
                {
                    ...prev,
                    [selTagKey]: Array.isArray(prev[selTagKey]) // Ensure it's an array
                        ? prev[selTagKey].map((item, i) =>
                            i === selTagIndx ? { ...item, [changeTo]: changeWith || "", format: "" } : item
                        )
                        : [],
                }// Provide a fallback in case it's undefined or not an array
            ));
        } else if (changeTo === "subType" && typeof changeWith === "string" && changeWith.toLowerCase() === "password") {
            console.log("Line 161")
            setDroppedItems((prev) => (
                {
                    ...prev,
                    [selTagKey]: Array.isArray(prev[selTagKey])
                        ? prev[selTagKey].map((item, i) =>
                            i === selTagIndx ? { ...item, [changeTo]: changeWith, maskType: "All", maskCharacter: "ASTERISK" } : item
                        )
                        : [],
                }
            ));
        }
        else if (changeTo === "subType" && (changeWith === NUMBER.CURRENCY || changeWith === NUMBER.INTEGER || changeWith === NUMBER.DECIMAL)) {
            let decPlace = changeWith !== NUMBER.DECIMAL ? 0 : decimalPlace;
            const isCurrency = changeWith === NUMBER.CURRENCY;
            // const currencyType = null

            setDroppedItems((prev) => (
                {
                    ...prev,
                    [selTagKey]: Array.isArray(prev[selTagKey]) // Ensure it's an array
                        ? prev[selTagKey].map((item, i) =>
                            i === selTagIndx ? { ...item, [changeTo]: changeWith, decimalPlace: decPlace, isCurrency } : item
                        )
                        : [],
                }// Provide a fallback in case it's undefined or not an array
            ));

        } else if (changeTo === "format" && selectedTag.subType === TEMPORAL.DATE_TIME) {
            let val = timeFormats[0].format;
            if (!is24Hrs) {
                val = timeFormats[1].format
            }
            setDroppedItems((prev) => (
                {
                    ...prev,
                    [selTagKey]: Array.isArray(prev[selTagKey]) // Ensure it's an array
                        ? prev[selTagKey].map((item, i) =>
                            i === selTagIndx ? { ...item, [changeTo]: changeWith + " " + val } : item
                        )
                        : [],
                }// Provide a fallback in case it's undefined or not an array
            ));

        } else {
            setDroppedItems((prev) => (
                {
                    ...prev,
                    [selTagKey]: Array.isArray(prev[selTagKey]) // Ensure it's an array
                        ? prev[selTagKey].map((item, i) =>
                            i === selTagIndx ? { ...item, [changeTo]: changeWith } : item
                        )
                        : [],
                }// Provide a fallback in case it's undefined or not an array
            ));
        }
        setDropDownToggle(null)
    }

    // const handleSelectTagOptions = () => {
    //     if (!selectedOptions.length) return
    //     setDroppedItems((prev) => (
    //         {
    //             ...prev,
    //             [selTagKey]: Array.isArray(prev[selTagKey])
    //                 ? prev[selTagKey].map((item, i) => {
    //                     if (i === selTagIndx) {
    //                         return { ...item, options: [...selectedOptions] };
    //                     }
    //                     return item;
    //                 })
    //                 : [],
    //         }
    //     ));
    // }

    // useEffect(() => {
    //     handleSelectTagOptions();
    // }, [selectedOptions])


    useEffect(() => {
        if (selectedTag.subType === TEMPORAL.DATE || selectedTag.subType === TEMPORAL.DATE_TIME || selectedTag.subType === TEMPORAL.TIME) {

            if (selectedTag.subType === TEMPORAL.DATE) {
                handlePropertyChange("format", dateFormats[0].format)
            }
            else if (selectedTag.subType === TEMPORAL.DATE_TIME) {
                handlePropertyChange("format", dateTimeFormats[0].format)
            }
            else if (selectedTag.subType === TEMPORAL.TIME) {
                handlePropertyChange("format", timeFormats[0].format)
            }
        }
        //  else if(selectedTag.subType === TEXT.PASSWORD) {
        //     handlePropertyChange("format", timeFormats[0].format)
        // }
    }, [selectedTag.subType])

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

    useEffect(() => {
        if (selectedTag.label === "temporal") {
            handlePropertyChange("subType", TEMPORAL.DATE);
            handlePropertyChange("format", "DD/MM/YY");
        }
    }, [])


    const handleIs24HrsClick = (checked: boolean) => {
        if (selectedTag.subType === TEMPORAL.TIME) {
            if (!checked) {
                handlePropertyChange("format", timeFormats[1].format)
            } else {
                handlePropertyChange("format", timeFormats[0].format)
            }
        }
        setIs24Hrs(checked)
    }


    const handleIsCurrentTimeStamp = (checked: boolean) => {
        if (selectedTag.type.toLowerCase() === "temporal") {
            setIsCurrentTimeStamp(checked)
            handlePropertyChange("currentTimeStamp", checked);
        }
    }

    const handleAddSelectOption = () => {
        if (selectedOption && selectedOption.length) {
            setDroppedItems((prev) => (
                {
                    ...prev,
                    [selTagKey]: Array.isArray(prev[selTagKey])
                        ? prev[selTagKey].map((item, i) => {
                            if (i === selTagIndx) {
                                return { ...item, options: item.options ? [...item.options, selectedOption] : [selectedOption] };
                            }
                            return item;
                        })
                        : [],
                }
            ));
        }
    }


    const handleSelectOptionDel = (indx: number) => {
        // setSelectedOptions(prev =>
        //     prev.filter((_, i) => i !== indx)
        // )

        setDroppedItems((prev) => (
            {
                ...prev,
                [selTagKey]: Array.isArray(prev[selTagKey])
                    ? prev[selTagKey].map((item, i) => {
                        if (i === selTagIndx) {
                            return { ...item, options: item.options ? item.options.filter((_, i) => i !== indx) : [] };
                        }
                        return item;
                    })
                    : [],
            }
        ));
    }


    const handleDecimalPlace = (e: React.ChangeEvent<HTMLInputElement>) => {
        const val = Number(e.target.value)
        setDecimalPlace(val)
        handlePropertyChange("decimalPlace", val)
    }

    useEffect(() => {
        if ("styles" in selectedTag) {
            const fontSize = selectedTag?.styles?.textSize;
            const tagHeight = selectedTag?.dimensions?.height - 18;


            console.log(fontSize, tagHeight, "Line 323", selectedTag?.styles)

            if (selectedTag.subType !== "password" && selectedTag.subType !== "paragraph" && tagHeight > (fontSize + fontSize)) {
                console.log("Change subType Called from if")
                handlePropertyChange("subType", "paragraph")
            } else if (selectedTag.subType !== "password" && selectedTag.subType !== "single_line" && tagHeight <= (fontSize + fontSize)) {
                console.log("Change subType Called from elseif")
                handlePropertyChange("subType", "single_line")
            }
        }
    }, [selectedTag])

    console.log("RightSideBar - selectedTag", selectedTag)

    return (
        <>
            {/* Right Side Bar Start */}
            <div className='col-span-2 w-full h-full bg-white text-sm'>
                <p className="p-2 font-semibold text-md">Properties</p>
                <hr className="text-slate-200" />

                <div className="p-3 text-sm text-slate-600 flex flex-col gap-2">

                    {/* label */}
                    <div className="flex flex-col">
                        <label htmlFor="" className="">Label</label>
                        <input
                            value={selectedTag.label}
                            onChange={(e) => handlePropertyChange('label', e.target.value)}
                            type="text"
                            className="outline-none border-1 rounded px-2 py-1 border-slate-200" />
                    </div>

                    {/* Required */}
                    {(selectedTag.type !== "signature" && selectedTag.type !== "initials") && <div className="flex justify-between items-center">
                        <label htmlFor="required" className="text-xs text-slate-600 transitions-all duration-150">Required</label>
                        <input
                            id="required"
                            checked={selectedTag.required ? selectedTag.required : false}
                            onChange={(e) => handlePropertyChange('required', e.target.checked)}
                            type="checkbox"
                            className="outline-none border-1 rounded px-2 py-1 border-slate-200"
                        />
                    </div>}

                    {/* Use Current TimeStamp */}
                    {selectedTag.type.toLowerCase() === "temporal" && <div className="flex justify-left items-center gap-1.5 mt-0.5">
                        <label
                            className={`text-xs ${isCurrentTimeStamp ? "text-slate-600" : "text-slate-400"} transitions-all duration-150`}
                            htmlFor="use_current_timestamp"
                        >
                            Use Current Timestamp
                        </label>
                        <input
                            checked={isCurrentTimeStamp ? isCurrentTimeStamp : false}
                            onChange={(e) => handleIsCurrentTimeStamp(e.target.checked)}
                            id="use_current_timestamp"
                            type="checkbox"
                        />
                    </div>}

                    {/* Type | SubType */}
                    {selectedType && Object.keys(selectedType).length > 0 &&
                        <div className="flex flex-col">
                            <label htmlFor="" className="">Type</label>
                            <div
                                onClick={() => setDropDownToggle(dropDownToggle === DROPDOWNTOGGLE.TYPE ? null : DROPDOWNTOGGLE.TYPE)}
                                className="flex justify-between items-center border-1 rounded px-2 py-1 border-slate-200">
                                <p className="capitalize cursor-pointer">{selectedTag?.subType ? (selectedTag.subType === "date_time" ? "Date Time" : selectedTag.subType) : selectedType[Object.keys(selectedType)[0] as keyof typeof selectedType]}</p>
                                <MdKeyboardArrowDown />
                            </div>

                            {dropDownToggle === DROPDOWNTOGGLE.TYPE &&
                                <div className="shadow bg-slate-100 mt-1 border-[1px] border-slate-100 rounded">
                                    {Object.keys(selectedType).map((val, indx) => (
                                        <div
                                            key={indx}
                                            onClick={() => handlePropertyChange("subType", selectedType[val as keyof typeof selectedType])}
                                            className={`capitalize px-2 py-1 hover:bg-slate-200 cursor-pointer`}
                                        >
                                            {selectedType[val as keyof typeof selectedType] === "date_time" ? "Date Time" : selectedType[val as keyof typeof selectedType]}
                                        </div>
                                    ))}
                                </div>
                            }
                        </div>
                    }


                    {/* Mask Type  */}
                    {
                        selectedTag?.subType === TEXT.PASSWORD &&
                        <div>
                            <label htmlFor="" className="">Mask Type</label>
                            <div
                                onClick={() => setDropDownToggle(dropDownToggle === DROPDOWNTOGGLE.MASK_TYPE ? null : DROPDOWNTOGGLE.MASK_TYPE)}
                                className="flex justify-between items-center border-1 rounded px-2 py-1 border-slate-200">
                                <p className="capitalize cursor-pointer">{(selectedTag.maskType && selectedTag.maskType.replace("_", " ")) ? selectedTag.maskType : MASKTYPE.ALL}</p>
                                <MdKeyboardArrowDown />
                            </div>

                            {
                                dropDownToggle === DROPDOWNTOGGLE.MASK_TYPE &&
                                <div className="shadow bg-slate-100 mt-1 border-[1px] border-slate-100 rounded">
                                    {(Object.keys(MASKTYPE) as (keyof typeof MASKTYPE)[]).map((val, indx) =>
                                    (
                                        <div
                                            key={indx}
                                            onClick={() => handlePropertyChange("maskType", MASKTYPE[val])}
                                            className="capitalize px-2 py-1 hover:bg-slate-200 cursor-pointer"
                                        >
                                            {(MASKTYPE[val]).replace("_", " ")}
                                        </div>
                                    )
                                    )}
                                </div>
                            }
                        </div>
                    }


                    {/* Mask Character - START  */}
                    {
                        selectedTag?.subType === TEXT.PASSWORD &&
                        <div>
                            <label htmlFor="" className="">Mask Character</label>
                            <div
                                onClick={() => setDropDownToggle(dropDownToggle === DROPDOWNTOGGLE.MASK_CHARACTER ? null : DROPDOWNTOGGLE.MASK_CHARACTER)}
                                className="flex justify-between items-center border-1 rounded px-2 py-1 border-slate-200">
                                <p className="capitalize cursor-pointer py-1">
                                    {selectedTag?.maskCharacter
                                        ?
                                        selectedTag.maskCharacter === MASKCHARACTER.ASTERISK && <LuAsterisk /> ||
                                        selectedTag.maskCharacter === MASKCHARACTER.DOT && <GoDotFill /> ||
                                        selectedTag.maskCharacter === MASKCHARACTER.X && <IoClose />
                                        :
                                        <LuAsterisk />
                                    }
                                </p>


                                <MdKeyboardArrowDown />
                            </div>

                            {
                                dropDownToggle === DROPDOWNTOGGLE.MASK_CHARACTER &&
                                <div className="shadow bg-slate-100 mt-1 border-[1px] border-slate-100 rounded">
                                    {(Object.keys(MASKCHARACTER) as (keyof typeof MASKCHARACTER)[]).map((val, indx) =>
                                    (
                                        <div
                                            key={indx}
                                            onClick={() => handlePropertyChange("maskCharacter", MASKCHARACTER[val])}
                                            className="capitalize p-2 hover:bg-slate-200 cursor-pointer"
                                        >
                                            {
                                                MASKCHARACTER[val] === MASKCHARACTER.ASTERISK &&
                                                <LuAsterisk />
                                            }
                                            {
                                                MASKCHARACTER[val] === MASKCHARACTER.DOT &&
                                                <GoDotFill />
                                            }
                                            {
                                                MASKCHARACTER[val] === MASKCHARACTER.X &&
                                                <IoClose />
                                            }
                                        </div>
                                    )
                                    )}
                                </div>
                            }
                        </div>
                    }
                    {/* Mask Character - END  */}








                    {/* TEMPORAL DATE FORMAT - START */}
                    {
                        (selectedTag?.subType === TEMPORAL.DATE ||
                            selectedTag?.subType === TEMPORAL.TIME ||
                            selectedTag?.subType === TEMPORAL.DATE_TIME) &&

                        <div>
                            {/* <div className="flex justify-between">
                                <label htmlFor="" className="">Formats</label>
                                <div className="flex justify-center items-center gap-1.5">
                                    <input
                                        checked={showFormatEg ? showFormatEg : false}
                                        onChange={(e) => setShowFormatEg(e.target.checked)}
                                        id="data_time_format"
                                        type="checkbox" />
                                    <label className="text-xs text-slate-400" htmlFor="data_time_format">
                                        Show Example
                                    </label>
                                </div>
                            </div> */}

                            <div className="flex justify-between">
                                <label htmlFor="" className="">Formats</label>
                                {(selectedTag.subType === TEMPORAL.DATE_TIME || selectedTag.subType === 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">
                                    {selectedTag.format ? selectedTag.format : dateTimeFormatMap['date'][0].format}
                                    {/* {(selectedTag.subType !== TEMPORAL.DATE && selectedTag.subType !== 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[selectedTag.subType].map((valObj, indx) => {
                                        // let val = showFormatEg ? valObj["example"] : valObj["format"]
                                        let val = valObj["format"]
                                        if (selectedTag.subType === TEMPORAL.DATE_TIME) {
                                            if (is24Hrs) {
                                                val = val + " " + timeFormats[0].format;
                                            } else {
                                                val = val + " " + timeFormats[1].format;
                                            }
                                        }
                                        return (
                                            <div
                                                key={indx}
                                                onClick={() => handlePropertyChange("format", valObj["format"])}
                                                className="px-2 py-1 hover:bg-slate-200 cursor-pointer"
                                            >
                                                {val}
                                            </div>
                                        )
                                    }
                                    )}
                                </div>
                            }

                            {selectedTag.format && <div className="pt-4">
                                {/* <p>
                                    Example
                                </p> */}
                                <p className="text-center">{dayjs().format(selectedTag.format)}</p>
                            </div>}
                        </div>
                    }
                    {/* TEMPORAL DATE FORMAT - END */}



                    {/* NUMBER - DECIMAL PLACES */}
                    {
                        selectedTag?.subType === NUMBER.DECIMAL &&
                        <div>
                            <label htmlFor="" className="">Decimal Places</label>
                            <input
                                    type="number"
                                    onChange={(e) => handleDecimalPlace(e)}
                                    value={decimalPlace}
                                    className="bg-slate-100 w-full outline-none p-2 rounded" />
                        </div>
                    }


                    {(selectedTag?.subType === "single select" || selectedTag?.subType === "multi select") &&
                        <>
                            <div>
                                <label htmlFor="" className="">Add Options</label>
                                <input
                                    type="text"
                                    onChange={(e) => setSelectedOption(e.target.value)}
                                    value={selectedOption}
                                    onKeyUp={(e) => {
                                        if (e.code === "Enter") {
                                            // if (selectedOption) {
                                            //     setSelectedOptions((prev) => [...prev, selectedOption]);
                                            //     setSelectedOption("");
                                            // }
                                            handleAddSelectOption()
                                        }
                                    }}
                                    className="bg-slate-100 w-full outline-none p-2 rounded" />

                                <div className="h-[150px] mt-1 overflow-hidden overflow-y-auto">
                                    {
                                        selectedTag.options && selectedTag.options.map((val, indx) => (
                                            <div
                                                key={indx}
                                                className="flex justify-between items-center px-2 py-1 my-1 rounded bg-slate-100">
                                                <p>{val}</p>
                                                <IoMdClose
                                                    onClick={() =>
                                                        // setSelectedOptions(prev =>
                                                        //     prev.filter((_, i) => i !== indx)
                                                        // )
                                                        handleSelectOptionDel(indx)
                                                    }
                                                    className="cursor-pointer text-slate-500 hover:text-slate-600" />
                                            </div>
                                        ))
                                    }
                                </div>
                            </div>
                        </>
                    }


                </div>
            </div>
            {/* Right Side Bar End */}
        </>
    )
}

export default RightSideBar