import React, { useEffect, useState } from 'react';
import fields from '../../../helper/fieldsListData';
// import api from '../../../config/api';
import { useParams } from 'react-router-dom';
import typeToIconMap from '../../../helper/iconMap';
import { FaQuestionCircle } from 'react-icons/fa';
import { TagsProperties, TagsTypes } from '../../../utlity/types';
import { v4 as uuidv4 } from "uuid";
import axios from 'axios';

const handlePointerDown = (event: React.DragEvent<HTMLDivElement>, label: string, recipientId: number, recipientIndx: number, tagsProperties: TagsProperties) => {
    const dragElemRect = event.currentTarget.getBoundingClientRect();
    let width = dragElemRect.width
    let height = dragElemRect.height

    if (label === TagsTypes.RADIO || label === TagsTypes.CHECKBOX) {
        const innerIconConRect = event.currentTarget.children[0].getBoundingClientRect();
        width = innerIconConRect.width + 10
        height = innerIconConRect.height + 10
    }

    // Handling Initia Width and height of Some tags - START
    if (label === TagsTypes.STAMP) {
        width = 160
        height = 160
    } else if (label === TagsTypes.SIGNATURE) {
        width = 200
        height = 75
    } else if (label === TagsTypes.INITIALS) {
        width = 85
        height = 75
    }
    // Handling Initia Width and height of Some tags - END

    const offsetX = event.clientX - dragElemRect.left;
    const offsetY = event.clientY - dragElemRect.top;

    const obj = {
        label,
        offsetX,
        offsetY,
        recipientId: recipientId,
        recipientIndx: recipientIndx,
        width,
        height,
        properties: tagsProperties
    }

    if (obj.label.toLowerCase() === "radio" || obj.label.toLowerCase() === "checkbox") obj.group = uuidv4();

    window.dragElemData = JSON.stringify(obj);
}

interface FieldListProps {
    color: string;
    recipientId: number;
    recipientIndx: number;
    acntId?: string | null;
}

const FieldList: React.FC<FieldListProps> = ({ color, recipientId, recipientIndx, acntId = null }) => {

    const [tagsData, setTagsData] = useState<TagsProperties[]>([]);

    let { accountId } = useParams<{ accountId: string }>();

    if (acntId) {
        accountId = acntId;
    }

    if (!accountId) {
        window.location.href = "/";
        return null;
    }

    useEffect(() => {
        axios
            .get(`${import.meta.env.VITE_BASE_URI}/api/accounts/${accountId}/tags`, {
                headers: {
                    "ngrok-skip-browser-warning": "69420",
                }
            })
            .then((res) => {
                const priorityOrder = ['SIGNATURE', 'INITIALS', 'STAMP'];

                const data = res.data;

                // Separate prioritized and other tags
                const prioritized = data.filter((tag: any) =>
                    priorityOrder.includes(tag.type)
                );

                const others = data
                    .filter((tag: any) => !priorityOrder.includes(tag.type))
                    .sort((a: any, b: any) => a.type.localeCompare(b.type));

                // Maintain the custom order of priority
                const prioritizedSorted = priorityOrder
                    .map((type) => prioritized.find((tag: any) => tag.type === type))
                    .filter(Boolean); // remove undefined in case not found

                setTagsData([...prioritizedSorted, ...others]);
            })
            .catch((err) => {
                console.error(err.message);
            });
    }, []);

    return (
        <div>
            {tagsData.map((field, index) => {

                const IconComponent = typeToIconMap[field.type] || <FaQuestionCircle />;
                // Optional: skip unknown types
                if (!IconComponent) return null;

                return (
                    // <div key={index} draggable={true} onDragStart={(e) => handleDragStart(e, field.label, recipientId)} className="p-1 flex justify-start items-center gap-2 rounded-sm cursor-grab hover:bg-slate-200 transition-all duration-300">
                    <div
                        draggable={true}
                        key={index}
                        onPointerDown={(e) => handlePointerDown(e, field.type.toLowerCase(), recipientId, recipientIndx, field)}
                        className="p-1 flex justify-start items-center gap-2 rounded-sm cursor-grab hover:bg-slate-200 transition-all duration-300">
                        <div
                            className={`p-1 text-sm rounded-sm text-white`}
                            style={{ background: color }}>
                            {IconComponent}
                        </div>
                        <p
                            className="capitalize text-xs">
                            {field.type.toLowerCase()}
                        </p>
                    </div>
                )
            }


            )}
        </div>
    );
};

export default FieldList;