import { useResourceStore } from '@kevisual/resources/pages/store/resource';
import { useResourceFileStore } from '@kevisual/resources/pages/store/resource-file';
import { Box, Button, Divider, Drawer, Tab, Tabs } from '@mui/material';
import { useMemo, useState } from 'react';
import { QuickValues, QuickTabs } from './QuickTabs';
import { Delete, Trash } from 'lucide-react';
import { InitProvider } from '../../App';

export const FileDrawer = () => {
  const { prefix, getList } = useResourceStore();
  const { resource, openDrawer, setOpenDrawer, deleteFile } = useResourceFileStore();
  const [tab, setTab] = useState<string>(QuickValues[0]);
  const quickCom = useMemo(() => {
    return QuickTabs.find((item) => item.value === tab)?.component;
  }, [tab]);
  return (
    <>
      <Drawer
        // aria-label={'文件详情'}
        open={openDrawer}
        onClose={() => {
          // document.getElementById('focus-safe-element')?.focus();
          const activeElement = document.activeElement as HTMLElement;
          if (activeElement) {
            activeElement.blur();
          }
          setOpenDrawer(false);
        }}
        ModalProps={{
          keepMounted: true,
        }}
        anchor='right'
        style={{
          zIndex: 1000,
        }}>
        <div className='p-4  overflow-hidden h-full sm:w-[600px]'>
          <div style={{ height: '140px' }}>
            <h2 className='text-2xl font-bold py-2 pb-6 flex '>
              <div className='grow truncate'>{resource?.name ? resource.name.replace(prefix, '') : resource?.prefix?.replace(prefix, '')}</div>
              <Button
                sx={{ ml: 2 }}
                color='primary'
                size='small'
                onClick={() => {
                  if (resource) {
                    deleteFile(resource, {
                      onSuccess: () => {
                        getList();
                        setOpenDrawer(false);
                      },
                    });
                  }
                }}>
                <Trash />
              </Button>
            </h2>
            <Divider />
            <Box sx={{ borderBottom: 1, mt: 2, borderColor: 'divider' }}>
              <Tabs value={tab} onChange={(_, value) => setTab(value)}>
                {QuickTabs.map((item) => (
                  <Tab key={item.value} label={item.label} value={item.value} icon={item.icon} iconPosition='start' />
                ))}
              </Tabs>
            </Box>
          </div>
          <Box className='' sx={{ p: 2, height: 'calc(100% - 140px)', overflow: 'hidden' }}>
            <div className='scrollbar' style={{ height: '100%', overflow: 'auto' }}>
              {quickCom && quickCom()}
            </div>
          </Box>
        </div>
      </Drawer>
      <button id='focus-safe-element' style={{ display: 'none' }}>
        Focus Safe Element
      </button>
    </>
  );
};

export const FileDrawerApp = () => {
  return (
    <InitProvider>
      <FileDrawer />
    </InitProvider>
  );
};
