import React, { useEffect, useState } from "react";

import { __ } from '@wordpress/i18n';
 
import { checkSelectVisible } from '../../../../shared/callbacks/visible/check-select';
import { checkCheckboxVisible } from '../../../../shared/callbacks/visible/check-checkbox';
import { checkToggleVisible } from '../../../../shared/callbacks/visible/check-toggle';

import { GeneralSettings } from './general-settings';
import { TermsSettings } from './terms-settings';
import { ExcludeTermsSettings } from './exclude-terms-settings';
import { OnLoadTermsSettings } from './onload-terms-settings';
import { SortingSettings } from './sorting-settings';

// todo: Change the way we get taxonomies and change the structure in JS to be OB or array of objects

const {
    GroupContainer,
} = window?.divi?.modal;

const {
    ModuleFields,
} = window?.divi?.module;

export default function PostLoopSettings({ defaultSettingsAttrs, attrs,taxonomiesCheckbox, taxonomies, acfFields, allAcfFields, categories, tags, taxonomyTerms, savedTypesCheckbox  }) {
    
    const postDataSelected = attrs?.post?.advanced?.type?.desktop?.value;
    const [activeTab, setActiveTab] = React.useState('general');

    /**
     * Set the active tab.
     */
    const handleActiveTab = ({event}) => {
        // get tab value
        const tabValue = event.target.dataset.name;
        // set active tab
        setActiveTab(tabValue);
    }

    /**
     * Check the active tab.
     */
    const ifActiveTabIs = (tab) => {
        return activeTab === tab;
    }

    const loopOptionsTabs = {
        loopOptionsTabs: {
            groupName:   "loopOptionsTabs",
            container:   false,
            render:      true,
            priority:    10,
            component: {
                type:  'field',
                name:  'divi/button-options',
                props: {
                    name: 'loopOptionsTabs',
                    options:   {
                        general: {
                            label: __("General", "divi-ajax-filter")
                        },
                        terms: {
                            label: __("Terms", "divi-ajax-filter")
                        },
                        excludeTerms: {
                            label: __("Exclude Terms", "divi-ajax-filter")
                        },
                        termsOnLoad: {
                            label: __("On Load", "divi-ajax-filter")
                        },
                        sorting: {
                            label: __("Sorting", "divi-ajax-filter")
                        },
                    },
                    value:     activeTab,
                    showLabel: true,
                    tabUi:     true,
                    onChange: ({event}) => {
                        handleActiveTab({event});
                    },
                },
            },
        }
    };
    
  return (
    <React.Fragment>
        <GroupContainer id="loopOptions" title={__('Loop Options', 'divi-ajax-filter')}>
            <ModuleFields
                fields={loopOptionsTabs}
            />            
            <GeneralSettings ifActiveTabIs={ifActiveTabIs} defaultSettingsAttrs={defaultSettingsAttrs} checkSelectVisible={checkSelectVisible} checkToggleVisible={checkToggleVisible} acfFields={acfFields} allAcfFields={allAcfFields} taxonomiesCheckbox={taxonomiesCheckbox} savedTypesCheckbox={savedTypesCheckbox} selectedPostTypes={postDataSelected} />

            <TermsSettings attrs={attrs} ifActiveTabIs={ifActiveTabIs} defaultSettingsAttrs={defaultSettingsAttrs} categories={categories} tags={tags} taxonomies={taxonomies} checkSelectVisible={checkSelectVisible} acfFields={acfFields} checkToggleVisible={checkToggleVisible}
            />

            <ExcludeTermsSettings
                attrs={attrs}
                ifActiveTabIs={ifActiveTabIs}
                defaultSettingsAttrs={defaultSettingsAttrs}
                categories={categories}
                tags={tags}
                taxonomies={taxonomies}
                acfFields={acfFields}
                checkCheckboxVisible={checkCheckboxVisible}
            />

            <OnLoadTermsSettings attrs={attrs} ifActiveTabIs={ifActiveTabIs} defaultSettingsAttrs={defaultSettingsAttrs} categories={categories} tags={tags} taxonomies={taxonomies} checkSelectVisible={checkSelectVisible} />

            <SortingSettings ifActiveTabIs={ifActiveTabIs} defaultSettingsAttrs={defaultSettingsAttrs} checkSelectVisible={checkSelectVisible} acfFields={acfFields} />
        </GroupContainer>
    </React.Fragment>    
  );
}