import React from 'react';
import {Grid, Hidden, AppBar, Tabs, Tab, Typography, Box} from '@material-ui/core';
import { makeStyles, Theme } from '@material-ui/core/styles';
import ExamplesTab from "./examples/ExamplesTab";
import VariationsTab from './variations/VariationsTab';
import {useDispatch, useSelector} from "react-redux";
import {selectTabIndex, updateTabIndex, TabIndex} from "../slices/editorSlice";
import CodeGeneratorButton from './CodeGeneratorButton';
import ConversationsTab from './conversations/ConversationsTab';
import BasicTab from "./basic/BasicTab";

interface TabPanelProps {
    children?: React.ReactNode;
    index: any;
    value: any;
}

function TabPanel(props: TabPanelProps) {
    const { children, value, index, ...other } = props;

    return (
        <div
            role="tabpanel"
            hidden={value !== index}
            id={`simple-tabpanel-${index}`}
            aria-labelledby={`simple-tab-${index}`}
            {...other}
        >
            {value === index && (
                <Box p={3}>
                    <Typography component={'span'}>{children}</Typography>
                </Box>
            )}
        </div>
    );
}

function a11yProps(index: any) {
    return {
        id: `simple-tab-${index}`,
        'aria-controls': `simple-tabpanel-${index}`,
    };
}

export const useStyles = makeStyles((theme: Theme) => ({
    root: {
        flexGrow: 1,
        backgroundColor: theme.palette.background.paper,
    },
    instructionCard: {
        backgroundColor: theme.palette.background.default
    },
    additionalItemsGridItem: {
        marginRight: "10px",
    }
}));

export default function ModeTabs() {
    const dispatch = useDispatch();
    const classes = useStyles();
    const tabIndex = useSelector(selectTabIndex);

    const handleTabIndexChange = (event: React.ChangeEvent<{}>, newValue: number) => {
        dispatch(updateTabIndex(newValue));
    };

    return (
        <div className={classes.root}>
            <AppBar position="static">
                <Grid
                    justify="space-between" // Add it here :)
                    alignItems="center"
                    container
                    spacing={1}
                >
                    <Grid item>
                        <Tabs value={tabIndex} onChange={handleTabIndexChange} aria-label="simple tabs example">
                            <Tab label="Simple" {...a11yProps(TabIndex.basic)} />
                            <Tab label="Examples" {...a11yProps(TabIndex.multipleExamples)} />
                            <Tab label="Variations" {...a11yProps(TabIndex.variations)} />
                            <Tab label="Conversations" {...a11yProps(TabIndex.conversations)} />
                        </Tabs>
                    </Grid>
                    <Hidden smDown>
                        <Grid item className={classes.additionalItemsGridItem}>
                            <CodeGeneratorButton/>
                        </Grid>
                    </Hidden>
                </Grid>
            </AppBar>
            <TabPanel value={tabIndex} index={TabIndex.basic}>
                <BasicTab/>
            </TabPanel>
            <TabPanel value={tabIndex} index={TabIndex.multipleExamples}>
                <ExamplesTab/>
            </TabPanel>
            <TabPanel value={tabIndex} index={TabIndex.variations}>
                <VariationsTab/>
            </TabPanel>
            <TabPanel value={tabIndex} index={TabIndex.conversations}>
                <ConversationsTab/>
            </TabPanel>
        </div>
    );
}