import React, { useState } from 'react';
import { makeStyles } from '@material-ui/core';
import { AmbientToggleButton } from '../../../inputs/buttons/AmbientToggleButton';
import { AmbientToggleButtonGroup } from '../../../inputs/buttons/AmbientToggleButtonGroup';
import { TokenGroupItem } from '../../../templates/ui/TokenGroupItem';
import { FluentTabPanel } from '../../../navigation/tabs/defaultTabs/FluentTabPanel';
import { FluentSimpleTab } from '../../../navigation/tabs/defaultTabs/FluentSimpleTab';
import { FluentSimpleTabs } from '../../../navigation/tabs/defaultTabs/FluentSimpleTabs';
import { AmbientVisualizer } from '../../../dataDisplay/visualization/AmbientVisualizer';
import { AmbientCard } from '../AmbientCard';
const useStyles = makeStyles((theme) => ({
    root: {
        position: 'relative'
    },
    item: {
        marginRight: theme.spacing(2)
    },
    tabPanelContents: {
        marginLeft: theme.spacing(2)
    },
    togglePadding: {
        padding: theme.spacing(2)
    }
}));
export const AmbientVisualizationCard = ({ title, toggleList1, toggleList2, toggleList3, tabList, tabContent1, tabContent2, tabContent3 }) => {
    const classes = useStyles();
    const [value, setValue] = useState(0);
    const [toggleValue, setToggleValue] = useState('month');
    const handleChange = (event, newValue) => {
        setValue(newValue);
    };
    const selectToggle = (event, nextView) => {
        setToggleValue(nextView);
    };
    return (React.createElement(AmbientCard, { title: title, customAdornment: " ", visualization: React.createElement("div", null, React.createElement(FluentTabPanel, { value: value, index: 0 }, React.createElement("div", { className: classes.tabPanelContents }, tabContent1 &&
            tabContent1.map((item) => {
                return (toggleValue === item.value && (React.createElement("div", null, React.createElement(AmbientVisualizer, { values: item.values, visualization: item.chartType, verticalBarColor: item.verticalBarColor, verticalBarBand: item.verticalBarBand, verticalBarXfield: item.verticalBarXfield, verticalBarXtype: item.verticalBarXtype, verticalBarYfield: item.verticalBarYfield, verticalBarYtype: item.verticalBarYtype, styleThin: item.styleThin }))));
            }))), React.createElement(FluentTabPanel, { value: value, index: 1 }, React.createElement("div", { className: classes.tabPanelContents }, tabContent2 &&
            tabContent2.map((item) => {
                return (toggleValue === item.value && (React.createElement("div", null, React.createElement(AmbientVisualizer, { values: item.values, visualization: item.chartType, verticalBarColor: item.verticalBarColor, verticalBarBand: item.verticalBarBand, verticalBarXfield: item.verticalBarXfield, verticalBarXtype: item.verticalBarXtype, verticalBarYfield: item.verticalBarYfield, verticalBarYtype: item.verticalBarYtype, styleThin: item.styleThin }))));
            }))), React.createElement(FluentTabPanel, { value: value, index: 2 }, React.createElement("div", { className: classes.tabPanelContents }, tabContent3 &&
            tabContent3.map((item) => {
                return (toggleValue === item.value && (React.createElement("div", null, React.createElement(AmbientVisualizer, { values: item.values, visualization: item.chartType, verticalBarColor: item.verticalBarColor, verticalBarBand: item.verticalBarBand, verticalBarXfield: item.verticalBarXfield, verticalBarXtype: item.verticalBarXtype, verticalBarYfield: item.verticalBarYfield, verticalBarYtype: item.verticalBarYtype, styleThin: item.styleThin }))));
            }))), React.createElement("div", null, React.createElement(FluentSimpleTabs, { value: value, onChange: handleChange, "aria-label": "simple tabs example" }, tabList &&
            tabList.map((item) => {
                return React.createElement(FluentSimpleTab, { label: item.label });
            })), React.createElement(FluentTabPanel, { value: value, index: 0 }, React.createElement("div", { className: classes.togglePadding }, React.createElement(AmbientToggleButtonGroup, { orientation: "horizontal", value: toggleValue }, toggleList1 &&
            toggleList1.map((item) => {
                return (React.createElement(AmbientToggleButton, { value: item.value, "aria-label": item.ariaLabel, onMouseUp: item.onClick, onClick: selectToggle, className: classes.item }, React.createElement(TokenGroupItem, { label: item.label, icon: item.icon })));
            })))), React.createElement(FluentTabPanel, { value: value, index: 1 }, React.createElement("div", { className: classes.togglePadding }, React.createElement(AmbientToggleButtonGroup, { orientation: "horizontal", value: toggleValue }, toggleList2 &&
            toggleList2.map((item) => {
                return (React.createElement(AmbientToggleButton, { value: item.value, "aria-label": item.ariaLabel, onMouseUp: item.onClick, onClick: selectToggle, className: classes.item }, React.createElement(TokenGroupItem, { label: item.label, icon: item.icon })));
            })))), React.createElement(FluentTabPanel, { value: value, index: 2 }, React.createElement("div", { className: classes.togglePadding }, React.createElement(AmbientToggleButtonGroup, { orientation: "horizontal", value: toggleValue }, toggleList3 &&
            toggleList3.map((item) => {
                return (React.createElement(AmbientToggleButton, { value: item.value, "aria-label": item.ariaLabel, onMouseUp: item.onClick, onClick: selectToggle, className: classes.item }, React.createElement(TokenGroupItem, { label: item.label, icon: item.icon })));
            })))))) }));
};
//# sourceMappingURL=AmbientVisualizationCard.js.map