SME-Web/src/components/process/processStepTwo/rightSideBar/attributes/CommonAttrDropDown.tsx

import { MdKeyboardArrowDown } from 'react-icons/md';
import { DROPDOWNTOGGLE, MASKCHARACTER, MASKTYPE, NUMBER, SELECT, TEMPORAL, TEXT } from '../RightSideBar';
import { DroppedItem, TagsTypes } from '../../../../../utlity/types';
import { dateFormats, timeFormats } from '../../../../../utlity/dateTimeFormats';
import { FaCommentsDollar } from 'react-icons/fa';

interface CommonAttrDropDownInt {
    selectedType: any;
    // subType: string | undefined;
    selectedTag: DroppedItem;
    dropDownToggle: DROPDOWNTOGGLE | null;
    setDropDownToggle: React.Dispatch<React.SetStateAction<DROPDOWNTOGGLE | null>>;
    handlePropertyChange: (changeTo: string, changeWith: string | boolean | number) => void;
}

const CommonAttrDropDown: React.FC<CommonAttrDropDownInt> = ({ selectedType, selectedTag, dropDownToggle, setDropDownToggle, handlePropertyChange }) => {

    let subType = "";
    let subTypeKey = ""

    switch (selectedTag.type.toLowerCase()) {
        case "number":
            if (selectedTag.decimalPlace === undefined) {
                subType = NUMBER.INTEGER;
                subTypeKey = "decimalPlace";
            } else if (selectedTag.isCurrency !== undefined && selectedTag.isCurrency) {
                subType = NUMBER.CURRENCY;
                subTypeKey = "isCurrency";
            } else if (selectedTag.decimalPlace === 0) {
                subType = NUMBER.INTEGER;
                subTypeKey = "decimalPlace";
            } else if (selectedTag.decimalPlace > 0) {
                subType = NUMBER.DECIMAL;
                subTypeKey = "decimalPlace";
            }
            break;
        case "text":
            if (selectedTag.multiLine === undefined) {
                subType = TEXT.PARAGRAPH
            } else if (selectedTag.multiLine) {
                subType = TEXT.PARAGRAPH;
            } else if (!selectedTag.multiLine) {
                subType = TEXT.SINGLE_LINE;
            }

            if ("maskType" in selectedTag && selectedTag.maskType !== null && selectedTag.maskType?.length) subType = TEXT.PASSWORD;

            subTypeKey = "multiLine";
            break;
        case "temporal":
            if (selectedTag.dateFormat === undefined) {
                subType = TEMPORAL.DATE;
            } else {
                subType = TEMPORAL[selectedTag.dateFormat.toUpperCase() as keyof typeof TEMPORAL];
            }
            subTypeKey = "dateFormat";
            break;
        case "select":
            if (selectedTag.multiSelect !== undefined && selectedTag.multiSelect) {
                subType = SELECT.MULTI_SELECT;
            } else {
                subType = SELECT.SINGLE_SELECT;
            }
            subTypeKey = "multiSelect";
            break;
        case "checkbox":
            console.log("Date type selected");
            break;
        case "radio":
            console.log("Date type selected");
            break;
    }

    return (
        <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">{subType}</p>
                {/* <p className="capitalize cursor-pointer">{subType ? (subType === "date_time" ? "Date Time" : 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) => {

                        let value = val.toLowerCase() as keyof typeof selectedType | number | boolean;
                        let isCurrency = false;
                        let isPassword = false;

                        // Handling NUMBER - START
                        if (value === NUMBER.INTEGER || value === NUMBER.CURRENCY) {
                            if (value === NUMBER.CURRENCY) {
                                isCurrency = true;
                            }
                            value = 0;
                        }
                        if (value === NUMBER.DECIMAL) {
                            value = selectedTag.decimalPlace ?? 0 > 0 ? selectedTag.decimalPlace ?? 2 : 2;
                        }
                        // Handling NUMBER - END

                        // Handling SELECT - START
                        if (subTypeKey === "multiSelect") {
                            if (value === "multi_select") {
                                value = true;
                            } else {
                                value = false
                            }
                        }
                        // Handling SELECT - END

                        // Handling TEXT - START
                        if (subTypeKey === "multiLine") {
                            if (value === "single_line") {
                                value = false;
                            } else {
                                value = true;
                            }

                            if (val.toLowerCase() === TEXT.PASSWORD) {
                                isPassword = true;
                            }
                        }
                        // Handling TEXT - END

                        return (
                            <div
                                key={indx}
                                onClick={() => {
                                    if (selectedTag.type.toLowerCase() === TagsTypes.NUMBER) {
                                        if (isCurrency) {
                                            handlePropertyChange("isCurrency", true);
                                            return;
                                        }
                                        handlePropertyChange(subTypeKey, value as number);
                                        if (selectedTag.isCurrency) handlePropertyChange("isCurrency", false)

                                    } else if (selectedTag.type.toLowerCase() === TagsTypes.SELECT) {

                                        handlePropertyChange(subTypeKey, value as boolean);

                                    } else if (selectedTag.type.toLowerCase() === TagsTypes.TEXT) {
                                        if (isPassword) {
                                            handlePropertyChange("maskType", MASKTYPE.ALL.toUpperCase());
                                            handlePropertyChange("maskCharacter", MASKCHARACTER.ASTERISK.toUpperCase());
                                        } else {

                                            handlePropertyChange("maskType", null);
                                            handlePropertyChange("maskCharacter", null);

                                        }
                                        handlePropertyChange(subTypeKey, value as boolean);
                                    } else if (selectedTag.type.toLowerCase() === TagsTypes.TEMPORAL) {
                                        handlePropertyChange(subTypeKey, selectedType[val as keyof typeof selectedType]);
                                        if (subTypeKey === "dateFormat") {
                                            let format = null;
                                            switch (value) {
                                                case "date":
                                                    format = dateFormats[0].format;
                                                    break;
                                                case "time":
                                                    format = timeFormats[0].format;
                                                    break;
                                                case "date_time":
                                                    format = dateFormats[0].format + " " + timeFormats[0].format;
                                                    break;
                                                default:
                                                    format = dateFormats[0].format;
                                            }

                                            handlePropertyChange("format", format as string);
                                        }
                                    } else {
                                        handlePropertyChange(subTypeKey, 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>
    )
}

export default CommonAttrDropDown