import Hyperlink from "../utils/Hyperlink";
import getAnchor from "../utils/getAnchor";
import {__} from '@wordpress/i18n';
import * as rsssl_api from "../utils/api";
import useFields from "../Settings/FieldsData";
import useMenu from "../Menu/MenuData";
import useLicense from "./License/LicenseData";
import filterData from "./FilterData";
import {useEffect, useState} from '@wordpress/element';
import ErrorBoundary from "../utils/ErrorBoundary";
import PremiumOverlay from "./PremiumOverlay";

/**
 * Render a grouped block of settings
 */
const SettingsGroup = (props) => {

    const {fields} = useFields();
    const {selectedFilter, setSelectedFilter} = filterData();
    const {licenseStatus} = useLicense();
    const {selectedSubMenuItem, subMenu} = useMenu();
    const [Field, setField] = useState(null);
    const [updatedIntro, setUpdatedIntro] = useState(null);

    useEffect(() => {
        import("./Field").then(({default: Field}) => {
            setField(() => Field);
        });
        if (activeGroup && activeGroup.intro && typeof activeGroup.intro === 'object') {
            setUpdatedIntro(activeGroup.intro[selectedFilter[filterId]]);
        }

    }, [selectedFilter]);

    /*
    * On reset of LE, send this info to the back-end, and redirect to the first step.
    * reload to ensure that.
    */
    const handleLetsEncryptReset = (e) => {
        e.preventDefault();
        rsssl_api.runLetsEncryptTest('reset').then((response) => {
            window.location.href = window.location.href.replace(/#letsencrypt.*/, '&r=' + (+new Date()) + '#letsencrypt/le-system-status');
        });
    }

    let selectedFields = [];
    //get all fields with group_id props.group_id
    for (const selectedField of fields) {
        if (selectedField.group_id === props.group) {
            selectedFields.push(selectedField);
        }
    }

    let activeGroup;
    for (const item of subMenu.menu_items) {
        if (item.id === selectedSubMenuItem && item.hasOwnProperty('groups')) {
            for (const group of item.groups) {
                if (group.group_id === props.group) {
                    activeGroup = group;
                    break;
                }
            }
        }
        if (activeGroup) break; // Exit the loop once a match is found.
    }

// If activeGroup is not set, then default to the parent menu item.
    if (!activeGroup) {
        for (const item of subMenu.menu_items) {
            if (item.id === selectedSubMenuItem) {
                activeGroup = item;
                break;
            }
            // Handle the case where there are nested menu items.
            if (item.menu_items) {
                const nestedItem = item.menu_items.find(menuItem => menuItem.id === selectedSubMenuItem);
                if (nestedItem) {
                    activeGroup = nestedItem;
                    break;
                }
            }
        }
    }

    // Check for nested groups in the activeGroup.
    if (activeGroup && activeGroup.groups) {
        const nestedGroup = activeGroup.groups.find(group => group.group_id === props.group);
        if (nestedGroup) {
            activeGroup = nestedGroup;
        } else {
            const nestedGroup = activeGroup.groups.find(group => group.group_id === props.group);

        }
    }

    let disabled = licenseStatus !== 'valid' && activeGroup.premium;
    //if a feature can only be used on networkwide or single site setups, pass that info here.
    let networkwide_error = !rsssl_settings.networkwide_active && activeGroup.networkwide_required;
    let helplinkText = activeGroup.helpLink_text ? activeGroup.helpLink_text : __("Instructions", "really-simple-ssl");
    let anchor = getAnchor('main');
    let disabledClass = disabled || networkwide_error ? 'rsssl-disabled' : '';
    const filterId = "rsssl-group-filter-" + activeGroup.id;
    //filter out all fields that are not visible
    selectedFields = selectedFields.filter((field) => {
        if (field.hasOwnProperty('visible')) {
            return field.visible;
        }
        return true;
    });
    //if there are no visible fields, return null
    if (selectedFields.length === 0) {
        return null;
    }
    return (
        <div className={"rsssl-grid-item rsssl-" + activeGroup.id + ' ' + disabledClass}>
            {activeGroup.title && <div className="rsssl-grid-item-header">
                <h3 className="rsssl-h4">{activeGroup.title}</h3>
                {activeGroup.groupFilter && (
                        <div className="rsssl-grid-item-controls">
                            <select
                                className="rsssl-group-filter"
                                id={filterId}
                                name={filterId}
                                value={selectedFilter[filterId]}
                                onChange={(e) => {
                                    const selectedValue = e.target.value;
                                    setSelectedFilter(selectedValue, filterId);
                                }}
                            >
                                {activeGroup.groupFilter.options.map((option) => (
                                    //if the value is equal to the selected value, set it as selected
                                    <option
                                        key={'option-'+option.id}
                                        value={option.id}
                                    >
                                        {option.title}
                                    </option>
                                ))}
                            </select>
                    </div>
                )}
                {!activeGroup.groupFilter && activeGroup.helpLink && anchor !== 'letsencrypt' && (
                    <div className="rsssl-grid-item-controls">
                        <Hyperlink
                            target="_blank"
                            rel="noopener noreferrer"
                            className="rsssl-helplink"
                            text={helplinkText}
                            url={activeGroup.helpLink}
                        />
                    </div>
                )}
                {anchor === 'letsencrypt' && <div className="rsssl-grid-item-controls">
                    <a href="#" className="rsssl-helplink"
                       onClick={(e) => handleLetsEncryptReset(e)}>{__("Reset Let's Encrypt", "really-simple-ssl")}</a>
                </div>}
            </div>}
            <div className="rsssl-grid-item-content">
                {(activeGroup.intro && typeof activeGroup.intro === 'string') && <ErrorBoundary fallback={"Could not load group intro"}>
                    {(activeGroup.intro && typeof activeGroup.intro === 'string') && <div className="rsssl-settings-block-intro">{activeGroup.intro}</div>}
                    {(activeGroup.intro &&  typeof activeGroup.intro === 'object') && <div className="rsssl-settings-block-intro">{updatedIntro}</div>}
                </ErrorBoundary>}

                {Field && selectedFields.map((field, i) =>
                        <Field key={"selectedFields-" + i} index={i} field={field} fields={selectedFields}/>
                )}
            </div>
            {disabled && !networkwide_error && <PremiumOverlay
                msg={activeGroup.premium_text}
                title={activeGroup.premium_title ? activeGroup.premium_title : activeGroup.title}
                upgrade={activeGroup.upgrade}
                url={activeGroup.upgrade}
            />}

            {networkwide_error && <div className="rsssl-locked">
                <div className="rsssl-locked-overlay">
                    <span
                        className="rsssl-task-status rsssl-warning">{__("Network feature", "really-simple-ssl")}</span>
                    <span>{__("This feature is only available networkwide.", "really-simple-ssl")}<Hyperlink
                        target="_blank" rel="noopener noreferrer" text={__("Network settings", "really-simple-ssl")}
                        url={rsssl_settings.network_link}/></span>
                </div>
            </div>}

        </div>
    )
}

export default SettingsGroup