// material-ui
import React, { useState} from 'react';
import MainCard from "../../components/MainCard";
import {Box, Tab, Tabs} from "@mui/material";
import {TabHeading} from "./TabConst";
import {useTheme} from "@mui/material/styles";
import FilePreviewGrid from "./FilePreviewGrid";
import ExternalRefGrid from "./ExternalRefGrid";
import {CARD_MAX_WIDTH} from "../../themes/themeConst";


// material-ui

// ==============================|| TAB PANEL RELATED ||============================== //
function TabPanel({children, value, index, ...other}) {
    return (
        <div role="tabpanel" hidden={value !== index} id={`application-tabpanel-${index}`}
             aria-labelledby={`application-tab-${index}`} {...other}>
            {value === index && children}
        </div>
    );
}

// ==============================|| TAB PANEL RELATED ||============================== //

const FileRefCard = ({thumbnailList, applicationId, reloadList, canEdit}) => {
    const [tabData] = useState(TabHeading);
    const [value, setValue] = useState(0);
    const theme = useTheme();

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

    return (
        <MainCard xs={12} md={12} lg={12}
                  content={false}
                  sx={{width:CARD_MAX_WIDTH}}
        >
            <Box sx={{borderBottom: 1, borderColor: 'divider'}}>
                <Tabs value={value} onChange={handleChange} aria-label="application tabs">
                    {tabData.map(data => (
                        <Tab
                            key={data.key}
                            sx={{
                                display: 'flex',
                                flexDirection: 'row',
                                justifyContent: 'center',
                                alignItems: 'center',
                            }}
                            label={data.name}
                        />
                    ))}
                </Tabs>
            </Box>
            {tabData.map(data => (
                <TabPanel
                    index={data.key-1}
                    value={value}
                    dir={theme.direction}
                    key={data.key}
                >
                    {data.key === 1 ?
                        <FilePreviewGrid
                            fileList={thumbnailList}
                            reloadList={reloadList}
                            canEdit={canEdit}
                        />
                        :
                        <ExternalRefGrid
                            applicationId={applicationId}
                            canEdit={canEdit}
                        />
                    }
                </TabPanel>
            ))}

        </MainCard>
    );
};

export default FileRefCard;
