import { useEffect, useMemo } from 'react';
import { useResourceStore } from '../store/resource';
import { Box, Button, Typography, ButtonGroup } from '@mui/material';
import { FileText, Table, Grid } from 'lucide-react';
import { FileTable } from './list/FileTable';
import { FileCard } from './list/FileCard';
import { PrefixRedirect } from './modules/PrefixRedirect';
import { UploadButton } from '../upload';
import { FileDrawer } from './draw/FileDrawer';
import { useResourceFileStore } from '../store/resource-file';
export const FileApp = () => {
  const { getList, prefix, setListType, listType } = useResourceStore();
  const { getStatFile, prefix: statPrefix, openDrawer } = useResourceFileStore();
  useEffect(() => {
    getList();
  }, []);
  const directory = useMemo(() => {
    const _prefix = prefix.split('/');
    let dir = _prefix.slice(2).join('/');
    if (dir.endsWith('/')) {
      dir = dir.slice(0, -1);
    }
    return dir;
  }, [prefix]);
  useEffect(() => {
    if (statPrefix && openDrawer) {
      getStatFile();
    }
  }, [statPrefix, openDrawer]);
  const handleUpload = (res: any) => {
    getList();
  };
  return (
    <div className='h-full py-4 px-2 w-full'>
      <Box
        sx={{
          borderRadius: 2,
          display: 'flex',
          marginBottom: 4,
          height: '100%',
          flexDirection: 'column',
        }}>
        <div className='flex items-center gap-3 mb-8'>
          <FileText className='w-8 h-8 text-amber-600' />
          <Typography
            variant='h1'
            className='text-amber-900'
            sx={{
              fontSize: { xs: '1.3rem', sm: '2rem' },
              fontWeight: 'bold',
            }}>
            Resources
          </Typography>
        </div>
        <Box className='flex items-center gap-2 mb-4'>
          <PrefixRedirect />
          <UploadButton prefix={directory} onUpload={handleUpload} />
          <ButtonGroup className='ml-auto' variant='contained' color='primary' sx={{ color: 'white' }}>
            <Button
              variant={listType === 'table' ? 'contained' : 'outlined'}
              sx={{
                '& > svg': {
                  color: listType === 'table' ? 'white' : 'inherit',
                },
              }}
              onClick={() => setListType('table')}>
              <Table />
            </Button>
            <Button
              variant={listType === 'card' ? 'contained' : 'outlined'}
              sx={{
                '& > svg': {
                  color: listType === 'card' ? 'white' : 'inherit',
                },
              }}
              onClick={() => setListType('card')}>
              <Grid />
            </Button>
          </ButtonGroup>
        </Box>
        <Box
          className='scrollbar'
          sx={{
            height: 'calc(100% - 80px)',
            overflow: 'auto',
          }}>
          {listType === 'card' ? <FileCard /> : <FileTable />}
        </Box>
      </Box>
      <FileDrawer />
    </div>
  );
};