import { useResourceStore } from '@kevisual/resources/pages/store/resource';
import { Button, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material';
import prettyBytes from 'pretty-bytes';
import dayjs from 'dayjs';
import { getIcon } from '../FileIcon';
import { Download, Trash } from 'lucide-react';
import clsx from 'clsx';
import { useResourceFileStore } from '@kevisual/resources/pages/store/resource-file';
import { useModal } from '@kevisual/components/modal/Confirm.tsx';

export const FileTable = () => {
  const { list, prefix, download, onOpenPrefix, getList } = useResourceStore();
  const { setOpenDrawer, setPrefix, deleteFile } = useResourceFileStore();
  const [modal, contextHolder] = useModal();
  return (
    <>
      {contextHolder}
      <TableContainer
        className='scrollbar'
        sx={{
          '&': {
            // scrollbarWidth: 'none',
            // scrollbarColor: '#888 #fff',
          },
          '&::-webkit-scrollbar': {
            width: '4px !important',
            height: '4px !important',
            background: '#fff',
          },
          '&::-webkit-scrollbar-thumb': {
            background: '#888',
            borderRadius: '2px',
          },
        }}
        component={Paper}>
        <Table
          sx={{
            minWidth: 650,
          }}
          aria-label='simple table'>
          <TableHead>
            <TableRow>
              <TableCell>Name</TableCell>
              <TableCell sx={{ minWidth: 100 }}>Size</TableCell>
              <TableCell sx={{ minWidth: 180 }}>Last Modified</TableCell>
              <TableCell sx={{ minWidth: 110 }}>Actions</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {list.map((row) => {
              const isFile = !!row.name;
              return (
                <TableRow key={row.etag || row.name || row.prefix}>
                  <TableCell>
                    <div
                      className={clsx('flex items-center gap-2 max-w-[300px] line-clamp-2 text-ellipsis', {
                        'cursor-pointer': true,
                      })}
                      onClick={(e) => {
                        if (!row.name) {
                          onOpenPrefix(row.prefix || '');
                        } else {
                          setPrefix(row.name || '');
                          setOpenDrawer(true);
                        }
                        e.stopPropagation();
                      }}>
                      <div className='shrink-0'>{getIcon(row.name)}</div>
                      {row.name ? row.name.replace(prefix, '') : row.prefix?.replace?.(prefix, '')}
                    </div>
                  </TableCell>
                  <TableCell>{row.size ? prettyBytes(row.size) : ''}</TableCell>
                  <TableCell>{row.lastModified ? dayjs(row.lastModified).format('YYYY-MM-DD HH:mm:ss') : ''}</TableCell>
                  <TableCell>
                    {isFile && (
                      <Button
                        variant='contained'
                        color='primary'
                        onClick={(e) => {
                          e.stopPropagation();
                          download(row);
                        }}
                        sx={{
                          color: 'white',
                          minWidth: '32px',
                          padding: '4px',
                        }}>
                        <Download />
                      </Button>
                    )}
                    {isFile && (
                      <Button
                        variant='contained'
                        color='error'
                        className='ml-2!'
                        onClick={(e) => {
                          e.stopPropagation();
                          modal.confirm({
                            title: '删除文件',
                            content: '确定删除该文件吗？',
                            onOk: () => {
                              deleteFile(row, {
                                onSuccess: () => {
                                  getList();
                                },
                              });
                            },
                          });
                        }}
                        sx={{
                          color: 'white',
                          minWidth: '32px',
                          padding: '4px',
                        }}>
                        <Trash />
                      </Button>
                    )}
                  </TableCell>
                </TableRow>
              );
            })}
          </TableBody>
        </Table>
      </TableContainer>
    </>
  );
};