import * as React from 'react';
import { useEffect, useState } from 'react';
import { PanelWithButton } from '../../Components/Panels/PanelWithButton';
import { ButtonMinimise } from '../../Components/Buttons/ButtonMinimise';
import { ButtonMaximise } from '../../Components/Buttons/ButtonMaximise';
import { AdaptableObjectCollection } from '../../Components/AdaptableObjectCollection';
import { AdaptableObjectRow } from '../../Components/AdaptableObjectRow';
import { AdaptablePopover } from '../../AdaptablePopover';
import { Box } from 'rebass';
export const AdaptableOptionsComponent = (props) => {
    const { api } = props;
    const getAdaptableOptionsColItems = () => [
        { Content: 'Property', Size: 5 },
        { Content: 'Value', Size: 5 },
        { Content: '', Size: 2 },
    ];
    const formatOptionValue = (optionValue) => {
        if (optionValue == undefined || optionValue == null) {
            return 'None';
        }
        const optionValueType = typeof optionValue;
        switch (optionValueType) {
            case 'string':
            case 'number':
            case 'bigint':
                return optionValue;
            case 'boolean':
                return optionValue ? 'True' : 'False';
            case 'function':
                return 'Function';
            case 'object':
                if (Array.isArray(optionValue)) {
                    return `[${optionValue
                        .map((optionValueItem) => formatOptionValue(optionValueItem))
                        .join(', ')}]`;
                }
                if (optionValue instanceof HTMLElement) {
                    return 'HTMLElement';
                }
            default:
                // should never happen, but just in case, to avoid a react runtime error
                return 'Complex value';
        }
    };
    const buildGridInfoOptionEntry = (gridInfoOption) => {
        const colItems = getAdaptableOptionsColItems();
        colItems[0].Content = gridInfoOption.name;
        const formattedOptionValue = formatOptionValue(gridInfoOption.value);
        const isUserDefinedValue = gridInfoOption.value !== gridInfoOption.defaultValue;
        colItems[1].Content = isUserDefinedValue ? (React.createElement(React.Fragment, null,
            React.createElement("span", { style: { fontWeight: 'bold' } }, formattedOptionValue),
            React.createElement("span", { style: { fontStyle: 'italic' } },
                ' ',
                "(Default: ",
                formatOptionValue(gridInfoOption.defaultValue),
                ")"))) : (formattedOptionValue);
        let infoButton = React.createElement(AdaptablePopover, { headerText: null, bodyText: [gridInfoOption.description] });
        colItems[2].Content = infoButton;
        return colItems;
    };
    const buildGridInfoOptionComponentContainer = (containerContainerName, gridInfoOptionContainer) => {
        const gridInfoOptionComponents = gridInfoOptionContainer.items.map((gridInfoOption) => {
            const gridOptionColItems = buildGridInfoOptionEntry(gridInfoOption);
            return React.createElement(AdaptableObjectRow, { key: `${gridInfoOption.name}`, colItems: gridOptionColItems });
        });
        return (React.createElement(AdaptableObjectCollection, { colItems: getAdaptableOptionsColItems(), items: gridInfoOptionComponents }));
    };
    const [gridInfoOptions, setGridInfoOptions] = useState();
    const [gridInfoContainerComponents, setGridInfoContainerComponents] = useState();
    useEffect(() => {
        const gridInfoOptions = api.internalApi.getMetamodelService().getGridInfoOptions();
        const gridInfoContainerComponentMap = new Map();
        gridInfoOptions.forEach((gridInfoOptionContainer, containerName) => {
            gridInfoContainerComponentMap.set(containerName, buildGridInfoOptionComponentContainer(containerName, gridInfoOptionContainer));
        });
        setGridInfoContainerComponents(gridInfoContainerComponentMap);
        setGridInfoOptions(gridInfoOptions);
    }, []);
    const [expandedComponentContainer, setExpandedComponentContainer] = useState('');
    return (React.createElement(Box, { className: "ab-AdaptableOptions", padding: 2, "data-name": "gridInfo-adaptableOptions-content" }, gridInfoOptions &&
        Array.from(gridInfoOptions.entries()).map(([containerName, container]) => (React.createElement(OptionContainerComponent, { key: containerName, name: containerName, label: container.containerLabel, viewMode: containerName === expandedComponentContainer ? 'expanded' : 'collapsed', onViewModeChange: (newViewMode) => setExpandedComponentContainer(newViewMode === 'expanded' ? containerName : '') }, gridInfoContainerComponents.get(containerName))))));
};
const OptionContainerComponent = (props) => {
    const { viewMode, name, label, onViewModeChange, children } = props;
    const requestViewModeChange = () => {
        onViewModeChange(viewMode === 'expanded' ? 'collapsed' : 'expanded');
    };
    const panelButton = viewMode === 'expanded' ? (React.createElement(ButtonMinimise, { onClick: () => requestViewModeChange(), tooltip: `Hide ${label}` })) : (React.createElement(ButtonMaximise, { onClick: () => requestViewModeChange(), tooltip: `Show ${label}` }));
    return (React.createElement(PanelWithButton, { className: `ab-OptionsContainer options-container-${name}`, variant: "default", headerText: label, headerProps: {
            fontSize: 3,
            style: {
                fontWeight: viewMode === 'expanded' ? 800 : 400,
                cursor: 'pointer',
            },
            'data-name': `options-container-header-${name}`,
            onClick: () => requestViewModeChange(),
        }, button: panelButton, style: { marginBottom: 3 } }, viewMode === 'expanded' && children));
};
