'use client';
import clsx from 'clsx';
import { Fragment, useState } from 'react';
import { Each, Show } from '../../00-base';
import { List } from '../../01-atoms';
import { Container } from '../Container';
import { TabItem } from './TabItem';
const styleMap = {
    primary: ['border-gray-5'],
    second: ['border-transparent', 'bg-gray-6', 'rounded-t-lg py-0.5'],
};
const validateTabs = (firstActiveTab, length) => firstActiveTab < length && !(firstActiveTab < 0) ? firstActiveTab : 0;
/**
 * TabList component for rendering a list of tabs with optional container and custom styles.
 *
 * @component
 * @example
 * // Example usage of TabList component
 * <TabList
 *   list={[
 *     { title: 'Tab 1', children: <div>Content 1</div> },
 *     { title: 'Tab 2', children: <div>Content 2</div> }
 *   ]}
 *   callback={(index) => console.log('Active tab:', index)}
 *   listProps={{ className: 'custom-list-class' }}
 *   contentProps={{ className: 'custom-content-class' }}
 *   firstActiveTab={0}
 *   modifier="primary"
 *   container={true}
 * />
 *
 * @param {Object} props - The properties of the TabList component.
 * @param {Array<Object>} props.list - The list of tabs to be displayed.
 * @param {string} props.list.title - The title of the tab.
 * @param {ReactNode} props.list.children - The content to be displayed inside the tab.
 * @param {Function} [props.callback] - Optional callback function triggered when a tab is clicked.
 * @param {Object} [props.listProps] - Additional properties for the list container.
 * @param {string} [props.listProps.className] - Custom class name for the list container.
 * @param {Object} [props.contentProps] - Additional properties for the content container.
 * @param {string} [props.contentProps.className] - Custom class name for the content container.
 * @param {number} [props.firstActiveTab=0] - The index of the initially active tab.
 * @param {'primary' | 'second'} [props.modifier='primary'] - The style modifier for the tabs.
 * @param {boolean} [props.container=false] - Whether to wrap the tabs and content in a container.
 * @param {Object} [props.restProps] - Additional HTML attributes for the root element.
 *
 * @returns {ReactNode} The rendered TabList component.
 */
export function TabList({ list, callback, listProps, contentProps, modifier = 'primary', firstActiveTab = 0, container = false, ...restProps }) {
    const [activeTab, setActiveTab] = useState(validateTabs(firstActiveTab, list.length));
    const handleItem = (index) => {
        callback && callback(index);
        setActiveTab(index);
    };
    const Element = Object.keys(restProps).length ? 'div' : Fragment;
    return (<Element {...restProps}>
      <Show>
        <Show.When isTrue={container}>
          <div className={clsx('border-b', styleMap[modifier], listProps?.className)}>
            <Container>
              <RenderList className="gap-4" list={list} handleItem={handleItem} activeTab={activeTab}/>
            </Container>
          </div>
          <Container>
            <div {...contentProps}>{list[activeTab].children}</div>
          </Container>
        </Show.When>
        <Show.Else>
          <RenderList className={clsx('gap-4 border-b', styleMap[modifier], listProps?.className)} list={list} handleItem={handleItem} activeTab={activeTab}/>
          <div {...contentProps}>{list[activeTab].children}</div>
        </Show.Else>
      </Show>
    </Element>);
}
const RenderList = ({ className, list, handleItem, activeTab, }) => {
    return (<List orientation="horizontal" className={className}>
      <Each of={list} render={({ title, icon }, index) => {
            return (<li key={title}>
              <TabItem icon={icon} onClick={() => handleItem(index)} isActive={index === activeTab}>
                {title}
              </TabItem>
            </li>);
        }}/>
    </List>);
};
//# sourceMappingURL=TabList.jsx.map