import React, {FC} from "react";
import {Tabs, TabsProps} from "./tabs";
import {Field} from "../cards";
import {map} from "lodash";
import {mapFromMeta} from "./TabHelpers";

export type TabFieldProps = {
    selectedTabId: string
    field: Field,
    onChange: (id: string) => void,
    format?: 'default' | 'booleanDictionary' | 'boolean' | 'dualBoolean',
    isBooleanTab?: boolean,
} & Pick<TabsProps, 'onTabHover'|'onTabUnhover'| 'multiple' | 'direction'>;

export const TabField: FC<TabFieldProps> = ({selectedTabId, field, onChange, onTabHover, onTabUnhover, format, ...props}) => {
    const meta = field?.meta;
    let tabs: TabsProps['tabs'] = []

    if (format === 'booleanDictionary') {
        tabs = map(field, (value, id) => {
            return {
                id,
                // @ts-ignore
                label: value?.meta?.name || id,
                // @ts-ignore
                subLabel: value?.meta?.alternativeLabels?.[`${id}`],
                tabDescription: value?.meta?.description,
                showDescriptionOnlyWhenSelected: value?.meta?.showDescriptionOnlyWhenSelected,
            }
        }).filter(Boolean) as TabsProps['tabs']
    } else if (format === 'boolean') {
        tabs = [
            {
                id: 'true',
                label: meta.name,
                subLabel: meta.subLabel,
                tabDescription: meta.description,
            }
        ] as  TabsProps['tabs']
    } else if (format === 'dualBoolean') {
        const booleanLabels = meta?.booleanLabels || {};
        tabs = [
            {
                id: 'true',
                label: booleanLabels?.true?.name || 'Yes',
                subLabel: booleanLabels?.true?.subLabel,
                tabDescription: booleanLabels?.true?.description ? [booleanLabels.true.description] : undefined,
            },
            {
                id: 'false',
                label: booleanLabels?.false?.name || 'No',
                subLabel: booleanLabels?.false?.subLabel,
                tabDescription: booleanLabels?.false?.description ? [booleanLabels.false.description] : undefined,
            }
        ] as TabsProps['tabs']
    } else {
        tabs = mapFromMeta(meta);
    }

    return <Tabs
                selectedTabId={selectedTabId}
                tabs={tabs}
                onTabSelect={onChange}
                onTabHover={onTabHover}
                onTabUnhover={onTabUnhover}
                {...props}
           /> ;
}