import { useEffect, useState } from "@wordpress/element";
import { applyFilters } from "@wordpress/hooks";
import Switch from "rc-switch";
import "../scss/switch.css";
import { __ } from "@wordpress/i18n";

import { EditIcon } from "../icons/icon-edit";
import EBLoader from "./Loader";

import {
    fetchEBSettingsData, saveEBSettingsData
} from "@essential-blocks/controls";
import GoogleMaps from "./modal/googleMaps";
import Instagram from "./modal/instagram";
import OpenseaNft from "./modal/openseaNft";
import Openverse from "./modal/openverse";
import ResponsiveBreakPoints from "./modal/responsiveBreakPoints";

/**
 * TabOptions Components
 * @returns
 */
export default function TabOptions() {
    const [responsiveModal, setResponsiveModal] = useState(false);
    const [optionModal, setOptionModal] = useState(false);
    const [clickedItem, setClickedItem] = useState("");
    const [settingsData, setSettingsData] = useState({});
    const [isLoading, setIsLoading] = useState(false);
    const [loaderData, setLoaderData] = useState({
        loading: false,
        response: false,
        message: "",
    });

    useEffect(() => {
        /**
         * fetch eb_settings data using AJAX
         */
        fetchEBSettingsData("eb_settings").then((data) => {
            setSettingsData(data ?? {});
        });

    }, []);

    const optimizations = {
        googleFont: {
            logo: `${EssentialBlocksLocalize.image_url}/admin/logo-google-font.png`,
            title: "Google Fonts",
            description: __(
                "Enable Google Fonts to get access to 1400+ exclusive fonts for all the fully customizable blocks of Essential Blocks.",
                "essential-blocks"
            ),
            doc: "https://essential-blocks.com/docs/configure-google-fonts/",
            default: true
        },
        enableFontawesome: {
            logo: `${EssentialBlocksLocalize.image_url}/admin/logo-fontawesome.png`,
            title: "Font Awesome",
            description: __("Enable Font Awesome to get access to 2,000+ exclusive icon library and toolkit for all the fully customizable blocks of Essential Blocks.", "essential-blocks"),
            default: true
        }
    };

    const apiIntegrations = applyFilters('eb_admin_option_integrations', {
        googleMapApi: {
            logo: `${EssentialBlocksLocalize.image_url}/admin/logo-google-map.png`,
            title: __("Google Maps", "essential-blocks"),
            description: __(
                __(
                    "You have to retrieve API key to use Google Maps from Essential Blocks.",
                    "essential-blocks"
                ),
                "essential-blocks"
            ),
            doc: "https://essential-blocks.com/docs/retrieve-google-maps-api/",
            component: GoogleMaps,
        },
        instagramToken: {
            logo: `${EssentialBlocksLocalize.image_url}/admin/logo-instagram.png`,
            title: __("Instagram", "essential-blocks"),
            description: __(
                "To showcase your Instagram feed on your website, collect Instagram access tokens.",
                "essential-blocks"
            ),
            doc:
                "https://essential-blocks.com/docs/retrieve-instagram-access-token/",
            component: Instagram,
        },
        openseaApi: {
            logo: `${EssentialBlocksLocalize.image_url}/admin/logo-opensea.png`,
            title: "Opensea NFT",
            description: __(
                "To display your OpenSea NFT items, collections, wallets, etc. connect the API key here.",
                "essential-blocks"
            ),
            doc: "https://essential-blocks.com/docs/retrieve-opensea-nft-api/",
            component: OpenseaNft,
        },
        openverseApi: {
            logo: `${EssentialBlocksLocalize.image_url}/admin/logo-openverse.png`,
            title: "Openverse",
            description: __(
                "To get unlimited access to Openverse images, provide your email & project name to generate API keys.",
                "essential-blocks"
            ),
            doc: "https://essential-blocks.com/docs/generate-openverse-api/",
            component: Openverse,
        },
    });

    /**
     * handleEditBtnClick
     * @param {*} item
     */
    const handleEditBtnClick = (item) => {
        setOptionModal(true);
        setClickedItem(item);
    };

    const handelResponsiveBreakPoints = () => {
        setResponsiveModal(true);
    };

    /**
     * handleOptimizationSwitch
     * @param {*} item
     * @param {*} value
     */
    const handleOptimizationSwitch = (item, value) => {
        setLoaderData({
            loading: true,
            response: false,
            message: "",
        });

        //Save Function
        saveEBSettingsData(item, value).then((data) => {
            const res = JSON.parse(data);
            if (res.success) {
                setLoaderData({
                    loading: true,
                    response: true,
                    message: __("Updated", "essential-blocks"),
                });
                setSettingsData({
                    ...settingsData,
                    [item]: Boolean(value).toString(),
                });
                setIsLoading(false);
            } else {
                setLoaderData({
                    loading: true,
                    response: true,
                    message: "Something went wrong! Please tyr again.",
                });
            }
            setTimeout(() => {
                setLoaderData({
                    loading: false,
                    response: false,
                    message: "",
                });
            }, [500]);
        });
    };

    const ClickedComponent = apiIntegrations[clickedItem]?.component;

    const regenerateAssets = () => {
        setLoaderData({
            loading: true,
            response: false,
            message: "",
        });
        const formData = new window.FormData();
        formData.append("action", "eb_regenerate_assets");
        formData.append("admin_nonce", EssentialBlocksLocalize.admin_nonce);
        formData.append("security", EssentialBlocksLocalize.regenerate_assets_nonce);
        formData.append("value", true);

        fetch(EssentialBlocksLocalize.ajax_url, {
            method: "POST",
            body: formData,
        })
            .then((res) => res.text())
            .then((data) => {
                const res = JSON.parse(data);
                if (res.success) {
                    setLoaderData({
                        loading: true,
                        response: true,
                        message: __(
                            "Assets Regenerated!",
                            "essential-blocks"
                        ),
                    });
                }
                setTimeout(() => {
                    setLoaderData({
                        loading: false,
                        response: false,
                        message: "",
                    });
                }, [1000]);
            });
    };

    return (
        <>
            {/* {isLoading && <EBLoader />} */}
            <EBLoader settings={loaderData} />
            <div>
                <h2 className="eb-admin-block-title">API Integrations</h2>
                <div className="eb-admin-grid">
                    {Object.keys(apiIntegrations).map((item, index) => (
                        <div
                            key={index}
                            className="eb-col-3 eb-admin-block eb-option-block"
                        >
                            {/* <div className="eb-admin-block eb-option-block"> */}
                            <div className="option-block-header">
                                <img src={apiIntegrations[item].logo} />
                                <div className="block-content">
                                    <a
                                        target="_blank"
                                        className="element__icon"
                                        onClick={() => handleEditBtnClick(item)}
                                    >
                                        <EditIcon></EditIcon>

                                        <span className="tooltip-text">
                                            Edit
                                        </span>
                                    </a>

                                    {/* <label
											className="eb-admin-checkbox-label"
										>
											<Switch
												checked={true}
												defaultChecked={true}
												disabled={false}
												checkedChildren="ON"
												unCheckedChildren="OFF"
											/>
										</label> */}
                                </div>
                            </div>
                            <h6 className="eb-admin-block__title">
                                {apiIntegrations[item].title}
                            </h6>
                            <p className="eb-admin-block__text">
                                {__(apiIntegrations[item].description)}
                            </p>
                            <a
                                target="_blank"
                                href={apiIntegrations[item].doc}
                                className="eb-admin-block__link"
                            >
                                {__("API Documentation", "essential-blocks")}
                            </a>
                            {/* </div> */}
                        </div>
                    ))}
                </div>
            </div>

            <div>
                <h2 className="eb-admin-block-title">
                    {__("Optimization Options", "essential-blocks")}
                </h2>
                <div className="eb-admin-grid">
                    {Object.keys(optimizations).map((item, index) => (
                        <div className="eb-col-4" key={index}>
                            <div className="eb-admin-block eb-option-block ">
                                <div className="option-block-header">
                                    <img
                                        src={optimizations[item].logo}
                                        className="block-icon"
                                    />
                                    <div className="block-content">
                                        <label className="eb-admin-checkbox-label">
                                            <Switch
                                                checked={!settingsData[item] ? (optimizations[item]?.default) : (settingsData[item] === "false" ? false : true)}
                                                onChange={(checked) => handleOptimizationSwitch(item, checked)}
                                                defaultChecked={true}
                                                disabled={false}
                                                checkedChildren="ON"
                                                unCheckedChildren="OFF"
                                            />
                                        </label>
                                    </div>
                                </div>

                                <h4 className="eb-admin-block__title">
                                    {optimizations[item].title}
                                </h4>
                                <p className="eb-admin-block__text mp0">
                                    {optimizations[item].description}
                                </p>
                                {optimizations[item]?.doc && (
                                    <a
                                        target="_blank"
                                        href={optimizations[item].doc}
                                        className="eb-admin-block__link"
                                    >
                                        {__(
                                            "API Documentation",
                                            "essential-blocks"
                                        )}
                                    </a>
                                )}
                            </div>
                        </div>
                    ))}
                </div>
            </div>

            <div className="eb-admin-grid">
                <div className="eb-col-12">
                    <h2 className="eb-admin-block-title">
                        {__("Assets Generation", "essential-blocks")}
                    </h2>
                    <div className="eb-admin-block regenerate-asset-block eb-block-xs">
                        <div className="content">
                            <h5 className="eb-admin-block__title">
                                {__("Asset Regeneration", "essential-blocks")}
                            </h5>
                            <p>
                                {__(
                                    "Essential Blocks styles & scripts are saved in Uploads folder. This option will clear all those generated files.",
                                    "essential-blocks"
                                )}
                            </p>
                        </div>

                        <button
                            className="eb-btn eb-btn-border"
                            onClick={() => regenerateAssets()}
                        >
                            {__("Regenerate Assets", "essential-blocks")}
                        </button>
                    </div>
                </div>
            </div>

            <div className="eb-admin-grid">
                <div className="eb-col-12">
                    <h2 className="eb-admin-block-title">
                        {__("Responsive Breakpoints", "essential-blocks")}
                    </h2>
                    <div className="eb-admin-block regenerate-asset-block eb-block-xs">
                        <div className="content">
                            <h5 className="eb-admin-block__title">
                                {__("Responsive Breakpoints", "essential-blocks")}
                            </h5>
                            <p>
                                {__(
                                    "Adjust the “Responsive Breakpoint” settings to define the screen widths at which your site will adapt for optimal viewing on tablets and mobile devices.",
                                    "essential-blocks"
                                )}
                            </p>
                        </div>

                        <button
                            className="eb-btn eb-btn-border"
                            onClick={() => handelResponsiveBreakPoints()}
                        >
                            {__("Configure Breakpoints", "essential-blocks")}
                        </button>
                    </div>
                </div>
            </div>

            {optionModal && (
                <div className="option-modal">
                    <div className="option-modal__inner">
                        <button
                            className="close-btn"
                            onClick={() => setOptionModal(false)}
                        >
                            <span className="dashicons dashicons-no"></span>
                        </button>
                        <ClickedComponent
                            setTrigger={setOptionModal}
                            settingsKey={clickedItem}
                            settingsData={settingsData}
                            setSettingsData={setSettingsData}
                        />
                    </div>
                </div>
            )}

            {responsiveModal && (
                <div className="option-modal">
                    <div className="option-modal__inner">
                        <button
                            className="close-btn"
                            onClick={() => setResponsiveModal(false)}
                        >
                            <span className="dashicons dashicons-no"></span>
                        </button>

                        <ResponsiveBreakPoints
                            setTrigger={setResponsiveModal}
                            settingsData={settingsData}
                            setSettingsData={setSettingsData}
                        />
                    </div>
                </div>
            )}
        </>
    );
}
