/* eslint-disable @typescript-eslint/no-unused-vars */
import React, {useEffect, useState} from "react";
/* eslint-disable @typescript-eslint/no-unused-vars */
import {getUsefulNumbers} from "../../../API/contacts";
import ActionModal from "../../UI/Modal/ActionsModal/ActionModal";
import PageTitle from "../../UI/Typography/PageTitle";
import CloseButton from "../../UI/CloseButton/CloseButton";
import {handleCopyContent} from "../../../helpers/functions";
import Typography from "../../UI/Typography/Typography";
import ReactDOM from "react-dom";
import DuaLoader from "../../UI/Loader/DuaLoader/DuaLoader";
import useLoading from "../../../hooks/useLoading";

type UsefulModalProps = {
    onClose: () => void;
};

const UsefulPhonesModal = ({onClose}: UsefulModalProps) => {
    /* eslint-disable @typescript-eslint/no-unused-vars */
    const [isLoading, setIsLoading] = useLoading(false);
    const [usefulNumbers, setUsefulNumbers] = useState<any>()

    const fetchUsefulNumbers = async () => {
        setIsLoading(true)
        try {
            const res = await getUsefulNumbers()
            setUsefulNumbers(res.data)
        } catch (error) {

        }
        finally {
            setIsLoading(false)
        }
    }

    useEffect(() => {

        fetchUsefulNumbers()
// eslint-disable-next-line react-hooks/exhaustive-deps
    }, [])

    return (
        <ActionModal onClose={onClose} customClass={"contacts-modal"}>
            {isLoading &&
                ReactDOM.createPortal(
                    <div className="dua-loader-portal">
                        <DuaLoader/>
                    </div>,
                    document.body
                )
            }
            <div className="contacts-list-modal--header-container d-flex justify-content-between align-items-top">
                <div>
                    <PageTitle>Χρήσιμα Τηλέφωνα</PageTitle>
                    <Typography
                        tag={"p"}
                        fontSize={"16px"}
                        fontWeight={"200"}
                        letterSpacing={"0.3px"}
                        color={"#707070"}
                    ></Typography>
                </div>
                <div>
                    <CloseButton onClick={onClose}/>
                </div>
            </div>
            <div className="contacts-list-modal--body-container">
                <div className="row">
                    {usefulNumbers?.map((usefulNumber: any) => (
                        <div className="col-12 col-md-3 gx-3 gy-3" key={usefulNumber.name}>
                            <div className="usefulnumberItem">
                                <p className="usefulnumberItem-title">{usefulNumber.name}</p>
                                {usefulNumber?.number.includes("-") ? (
                                    (() => {
                                        const [prefix, suffix] = usefulNumber.number.replace(/\s/g, "").split("-");
                                        const displayedNumber = `${prefix} -${suffix}`;
                                        return (
                                            <p
                                                className="usefulnumberItem-number"
                                                title="Κάντε click για αντιγραφή"
                                                onClick={() => handleCopyContent(prefix)}
                                            >
                                                {displayedNumber}
                                            </p>
                                        );
                                    })()
                                ) : (
                                    <p
                                        className="usefulnumberItem-number"
                                        title="Κάντε click για αντιγραφή"
                                        onClick={() => handleCopyContent(usefulNumber.number.replace(/\s/g, ""))}
                                    >
                                        {usefulNumber.number.replace(/\s/g, "")}
                                    </p>
                                )}
                            </div>
                        </div>
                    ))}
                </div>
            </div>
        </ActionModal>
    );
};

export default UsefulPhonesModal;