import { useRef, useState, useEffect } from "@wordpress/element";
import ClockIcon from "../icons/Clock.jsx";
import PlusIcon from "../icons/Plus.jsx";
import CrossIcon from "../icons/Cross.jsx";

const IconSection = ({ removeFileField, imgDir, icons, setIcons, defaultIcons, sweetAlert, delay, updateDelay, uploaderNonce}) => {
    const inputRefs = useRef([]);
    const dropAreaRef = useRef(null);
    const inputFieldRef = useRef(null);
    // const [delay, setDelay] = useState(1000);


    const handleButtonClick = (index) => {
        let image;
        if (wp.media) {
            wp.media.view.Modal.prototype.on('close', function() {
                const existingModal = document.querySelector(".media-modal");
                if (existingModal) {
                    existingModal.remove();
                }
            })
            image = wp.media({
                title: "Upload Icon",
                multiple: false,
                library: {
                    type: 'image'
                }
            }).open().on('select', function() {
                let uploaded_image = image.state().get('selection').first();
                let image_url = uploaded_image.toJSON().url;
                setIcons((prevIcons) => {
                    const updatedIcons = [...prevIcons];
                    updatedIcons[index] = [...defaultIcons, { "url": image_url, "uploading": false, "selected": false }];

                    return updatedIcons;
                });
            });
            image.open();
        }
    }

    const handleImageClick = (img, e, iconGroupIndex, index) => {

        setIcons((prevIcons) => {
            const updatedIcons = [...prevIcons];
            updatedIcons[index] = updatedIcons[index].map((icon) => {
                if (icon.url === img) {
                    return { ...icon, selected: true };
                } else {
                    return { ...icon, selected: false };
                }
            });
            return updatedIcons;
        });
    }
    const updateLastIcon = (url, uploading, index) => {
        setIcons((prevIcons) => {
            const updatedIcons = [...prevIcons];
            updatedIcons[index] = [...defaultIcons, { "url": url, "uploading": uploading, "selected": false }];
            return updatedIcons;
        });
    }

    const uploadToMedia = async (e, index) => {
        e.preventDefault();
        const file = e.dataTransfer ? e.dataTransfer.files[0] : e.target.files[0];
        const formData = new FormData();
        formData.append("nonce", uploaderNonce);
        formData.append("action", "tabrecall_upload_file");
        formData.append("type", "image")
        formData.append("file", file);

        try {
            const response = await fetch(ajaxurl, {
                method: "POST",
                body: formData,
            });
            const data = await response.json();
            if (data.success) {
                updateLastIcon(data.data.url, false, index);
                sweetAlert("The icon uploaded successfully!", "success");
            } else {
                sweetAlert(`Could not upload the icon: ${data.data ?? "Please try again"}`, "error");
                updateLastIcon("", false, index);
            }
        } catch (error) {
            sweetAlert("Could not upload the icon!", "error");
            updateLastIcon("", false, index);
        }
    }
    const handleDragOver = (e) => {
        e.preventDefault();
        const dragDropText = e.currentTarget.querySelector(".dragDropText");
        dragDropText.textContent = "Drop here to upload";
    };

    const handleDragLeave = (e) => {
        e.preventDefault();
        // dropArea.querySelector(".dragDropText").textContent = "Upload 48×48 png";
        const dragDropText = e.currentTarget.querySelector(".dragDropText");
        dragDropText.textContent = "Upload 48×48 png";
    }

    return (
        <div className="container msg_container tabrecall_pb_24 tabrecall_mb_20">
            <div className="msg_header_container">
                <div className="msg_header">
                    <h3 className="tabrecall_heading_1">Icon</h3>
                    <div className="tabrecall_header_time">
                        <ClockIcon />
                        <p className="tabrecall_text">Delay (milliseconds)</p>
                        <input
                            type="number"
                            className="tabrecall_text msg_header_input"
                            onChange={updateDelay && ((e) => updateDelay("icon", parseInt(e.target.value)))}
                            value={delay}
                            readOnly={!updateDelay}
                            autoFocus
                        />
                    </div>
                </div>

                <div className="icon_preview_div">
                    <h4 className="tabrecall_text">Preview</h4>
                    {
                        icons.map((iconGroup, index) => (
                            <div key={index} className="icon_preview_group">
                                {iconGroup.map((icon, idx) => (
                                    icon.selected && (
                                        <img
                                            key={idx}
                                            src={icon["url"].startsWith("blob:") ? icon["url"] : icon["url"]}
                                            alt="icon"
                                            style={{
                                                height: "49px",
                                                width: "49px",
                                                borderRadius: "5px",
                                                cursor: "pointer",
                                            }}
                                        />
                                    )
                                ))}
                            </div>
                        ))
                    }
                </div>
            </div>

            {icons.map((iconGroup, index) => (
                setIcons && (
                    <div key={index} className="parentIconUploader">
                    <div
                        className="iconUploadContainer"
                        ref={dropAreaRef}
                        onDragOver={(e) => handleDragOver(e)}
                        onDragLeave={(e) => handleDragLeave(e)}
                        onDrop={(e) => uploadToMedia(e, index)}
                    >
                        <div className="iconUploadItem" style={{ position: "relative" }}>
                            <button
                                type="button"
                                onClick={() => handleButtonClick(index)}
                                className="iconUploadButton tabrecall_mb_24"
                            >
                                <p className="tabrecall_text dragDropText">
                                    {/* {iconGroup ? iconGroup : "Upload 48×48 png"} */}
                                    Upload 48×48 png
                                </p>
                            </button>

                            {icons.length > 1 && (
                                <button
                                    type="button"
                                    onClick={() => {
                                        removeFileField(index);
                                        setIcons((prevIcons) => {
                                            const updatedIcons = [...prevIcons];
                                            updatedIcons.splice(index, 1);
                                            return updatedIcons;
                                        });
                                    }}
                                    className="crossButton crossButton_2"
                                >
                                    <CrossIcon />
                                </button>
                            )}
                        </div>
                    </div>
                    <div className="uploadedIconContainer tabrecall_mb_24">
                        <div className="uploadedIconText">
                            <p className="tabrecall_text">or</p>
                            <p className="tabrecall_text">Select</p>
                        </div>
                        <div className="uploadedIcons">
                            {iconGroup.map((icon, idx) => {
                                if (!icon.url.length) return;
                                return (
                                    (
                                        <div key={idx} className="uploadedIconsGroup">
                                            <img
                                                src={icon["url"].startsWith("blob:") ? icon["url"] : icon["url"]}
                                                alt="icon"
                                                style={{
                                                    height: "40px",
                                                    width: "40px",
                                                    borderRadius: "5px",
                                                    cursor: "pointer",
                                                }}
                                                className={icon["selected"] ? "selected" : ""}
                                                onClick={(e) =>
                                                    handleImageClick(
                                                        icon["url"].startsWith("blob:") ? icon["url"] : icon["url"],
                                                        e,
                                                        idx,
                                                        index
                                                    )
                                                }
                                            />
                                            <span className="loadingIcon" style={{ display: icon["uploading"] ? "block" : "none" }}> Uploading
                                            </span>
                                        </div>

                                    )
                                )
                            })}
                        </div>
                    </div>
                </div>
                )
            ))}

            {
                setIcons && (
                    <div style={{
                        paddingBottom: "12px"
                    }}>
                    <button type="button" style={{
                        opacity: (icons.length >= 3) ? "0.8" : "1",
                        cursor: (icons.length >= 3) ? "not-allowed" : "pointer"
                    }} onClick={(e) => {
                        e.preventDefault();
                        // addFileField();
                        if (icons.length >= 3) {
                            sweetAlert("You can only add 3 icons.", "error");
                            return;
                        }
                        setIcons((prevIcons) => {
                            const newIconGroup = JSON.parse(JSON.stringify(defaultIcons));
                            newIconGroup[0].selected = true;
                            const updatedIcons = [...prevIcons, newIconGroup];
                            return updatedIcons;
                        });
                    }
                    } className="addMoreBtn">
                        <PlusIcon />
                        <p className="tabrecall_text tabrecall_text_primary">Add Another Icon</p>
                    </button>
                    <div className="tabrecall_note">
                        <p>Note: You can show multiple icons which will change after {(delay/1000).toFixed(2)} sec</p>
                    </div>
                </div>
                )
            }
        </div>
    );
};

export default IconSection;