import { useEffect, useMemo, useState } from 'react';
import { useResourceStore } from '../store/resource';
import { Box, Button, Typography, ButtonGroup, Tooltip } from '@mui/material';
import { FileText, Table, Grid, Trash, Upload, FolderPlus, RefreshCw } 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';
import { IconButtonItem, IconButton } from '@kevisual/components/button/index.tsx';
import { useTranslation } from 'react-i18next';
import { DialogDeleteDirectory, DialogDirectory } from '../upload/DialogDirectory';
export const FileApp = () => {
  const { getList, prefix, setListType, listType, onOpenPrefix } = useResourceStore();
  const { getStatFile, prefix: statPrefix, openDrawer } = useResourceFileStore();
  useEffect(() => {
    getList();
  }, []);

  useEffect(() => {
    if (statPrefix && openDrawer) {
      getStatFile();
    }
  }, [statPrefix, openDrawer]);

  const paths = ['root', ...prefix.split('/').filter((item) => item)];
  const [_mockUsername, appKey, version, ...directory] = paths;
  const directoryPath = directory.join('/');
  const [dialogDeleteDirectory, setDialogDeleteDirectory] = useState(false);
  const [dialogDirectory, setDialogDirectory] = useState(false);
  const { t } = useTranslation();
  const onDirectoryClick = (prefix: string) => {
    onOpenPrefix(prefix);
  };
  const onUloadFinish = (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 />
          <Tooltip title={t('refresh')} placement='bottom'>
            <IconButton
              color='primary'
              onClick={() => {
                onDirectoryClick(prefix);
              }}>
              <RefreshCw />
            </IconButton>
          </Tooltip>
          {true && (
            <>
              <Tooltip title={t('create_directory')} placement='bottom'>
                <IconButton color='primary' onClick={() => setDialogDirectory(true)}>
                  <FolderPlus />
                </IconButton>
              </Tooltip>
              <DialogDirectory
                open={dialogDirectory}
                onClose={() => setDialogDirectory(false)}
                onSuccess={(newPrefix) => {
                  const currentPath = [appKey, version, newPrefix].filter(Boolean).join('/');
                  onDirectoryClick(currentPath + '/');
                  setDialogDirectory(false);
                }}
                prefix={directoryPath}
                opts={{
                  appKey,
                  version,
                }}
              />
            </>
          )}
          {true && (
            <>
              <Tooltip title={t('uploadDirectory')} placement='bottom'>
                <IconButton color='primary'>
                  <UploadButton onlyIcon uploadDirectory icon={<Upload />} directory={directoryPath} onUpload={onUloadFinish} />
                </IconButton>
              </Tooltip>
              <Tooltip title={t('upload')} placement='bottom'>
                <IconButton color='primary'>
                  <UploadButton onlyIcon directory={directoryPath} onUpload={onUloadFinish} />
                </IconButton>
              </Tooltip>
            </>
          )}
          {directoryPath !== '' && (
            <>
              <Tooltip title={t('deleteDirectory')} placement='bottom'>
                <IconButton
                  color='primary'
                  onClick={() => {
                    setDialogDeleteDirectory(true);
                  }}>
                  <Trash />
                </IconButton>
              </Tooltip>
              <DialogDeleteDirectory
                open={dialogDeleteDirectory}
                onClose={() => setDialogDeleteDirectory(false)}
                onSuccess={(prefix) => {
                  const newPrefix = prefix.split('/').slice(0, -1).join('/');
                  setDialogDeleteDirectory(false);
                  onDirectoryClick(newPrefix + '/');
                }}
                prefix={appKey + '/' + version + '/' + directoryPath}
              />
            </>
          )}
          <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>
  );
};
