import React, { useState } from 'react';
import { makeStyles } from '@material-ui/core';
import { FluentSimpleTabs } from '../defaultTabs/FluentSimpleTabs';
import { FluentSimpleTab } from '../defaultTabs/FluentSimpleTab';
import { FluentTabPanel } from '../defaultTabs/FluentTabPanel';
import clsx from 'clsx';
function a11yProps(index) {
    return {
        id: `simple-tab-${index}`,
        'aria-controls': `simple-tabpanel-${index}`
    };
}
const useStyles = makeStyles((theme) => ({
    root: {
        flexGrow: 1,
        backgroundColor: theme.palette.background.paper
    }
}));
export const FluentTabUtility = (props, ...otherProps) => {
    const classes = useStyles();
    const { TabList, block, className, variant, color, FluentSimpleTabsProps } = props;
    const [value, setValue] = useState(0);
    const handleChange = (event, newValue) => {
        setValue(newValue);
    };
    return (React.createElement("div", { className: clsx(classes.root, className) }, React.createElement(FluentSimpleTabs, Object.assign({ value: value, block: block, onChange: handleChange }, FluentSimpleTabsProps, otherProps), TabList.map((item, index) => {
        return (React.createElement(FluentSimpleTab, Object.assign({}, otherProps, { key: index, label: item.label, icon: item.icon, block: block, badgeContent: item.badgeContent, variant: variant, color: color }, a11yProps(index))));
    })), TabList.map((item, index) => {
        return (React.createElement(FluentTabPanel, { block: block, value: value, index: index, key: index }, item.child));
    })));
};
//# sourceMappingURL=FluentTabUtility.js.map