import React, {useEffect} from 'react';
import PropTypes from 'prop-types';
import { makeStyles } from '@material-ui/core/styles';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import Typography from '@material-ui/core/Typography';
import Box from '@material-ui/core/Box';
import ReactTooltip from 'react-tooltip';
import Images from '../../assets/Images';
import { Paper } from '@material-ui/core';
import ManualBookTia from './ManualBookTia';
import api from '../../api';

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

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

TabPanel.propTypes = {
    children: PropTypes.node,
    index: PropTypes.any.isRequired,
    value: PropTypes.any.isRequired,
};

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

const useStyles = makeStyles((theme) => ({
    root: {
        display: 'flex',
        // height: 244,
    },
    tabs: {
        borderRight: `1px solid ${theme.palette.divider}`,
    },
}));

export default function DocumentManagement() {
    const classes = useStyles();
    const [value, setValue] = React.useState(0);
    const [listData, setListData] = React.useState([])

    const handleChange = (event, newValue) => {
        setValue(newValue);
    };

    useEffect(() => {
        getDataDocument()
    })

    const getDataDocument = () => {
        api.create().getDocumentCategory().then(response => {
            let data = response.data.data
            setListData(data)
        })
    }

    return (
        <div style={{ flex: 1 }}>
            <div className={"main-color"} style={{ height: 78, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
                <Typography style={{ fontSize: '16px', color: 'white' }}>Document Management</Typography>
            </div>
            <Paper style={{ padding: 20 }}>
                <div style={{ display: 'grid', justifyContent: 'flex-end' }}>
                    <a data-tip={'Add New'} data-for="create">
                        <button
                            style={{
                                backgroundColor: 'transparent',
                                cursor: 'pointer',
                                borderColor: 'transparent',
                                margin: 5,
                                marginRight: 20
                            }}
                            onClick={() => null}
                        >
                            <img src={Images.add} />
                        </button>
                    </a>
                    <ReactTooltip border={true} id="create" place="bottom" type="light" effect="solid" />
                </div>
                <div className={classes.root}>
                    <Tabs
                        orientation="vertical"
                        variant="scrollable"
                        value={value}
                        onChange={handleChange}
                        aria-label="Vertical tabs example"
                        className={classes.tabs}
                    >
                        {listData.map((item, index) => {
                            return (
                                <Tab label={item.document_category_name} {...a11yProps(index)} />
                            )
                        })}
                    </Tabs>
                    {listData.map((item, index) => {
                        return (
                            <TabPanel value={value} index={index} style={{ width: '100%'}}>
                                {index === 0 ?
                                    <ManualBookTia /> :
                                    <span>Test</span>
                                }
                            </TabPanel>
                        )
                    })}
                </div>
            </Paper>
        </div>
    );
}