import { useResourceStore } from '@kevisual/resources/pages/store/resource';
import { Card, CardContent, Typography } from '@mui/material';
import { getIcon } from '../FileIcon';
import { amber } from '@mui/material/colors';
import clsx from 'clsx';
import { useResourceFileStore } from '@kevisual/resources/pages/store/resource-file';
export const FileCard = () => {
  const { list, prefix, onOpenPrefix } = useResourceStore();
  const { setPrefix, setOpenDrawer } = useResourceFileStore();
  return (
    <>
      {list.map((resource) => (
        <Card
          key={resource.etag || resource.name || resource.prefix}
          sx={{
            boxShadow: `0px 2px 1px -1px rgba(255, 193, 7, 0.2), 0px 1px 1px 0px rgba(255, 193, 7, 0.14), 0px 1px 3px 0px rgba(255, 193, 7, 0.12)`,
            borderRadius: '8px',
          }}
          style={{ margin: '10px' }}>
          <CardContent>
            <Typography
              variant='h5'
              component='div'
              className={clsx('flex items-center gap-2', {
                'cursor-pointer': true,
              })}
              onClick={(e) => {
                if (!resource.name) {
                  onOpenPrefix(resource.prefix || '');
                } else {
                  setPrefix(resource.name || '');
                  setOpenDrawer(true);
                }
                e.stopPropagation();
              }}>
              <div className='shrink-0'>{getIcon(resource.name)}</div>
              <div className='flex-1 truncate'>{resource.name ? resource.name.replace(prefix, '') : resource.prefix?.replace(prefix, '')}</div>
            </Typography>
            {resource.lastModified && <Typography color='text.secondary'>Last Modified: {resource.lastModified}</Typography>}
            {resource.size > 0 && <Typography color='text.secondary'>Size: {resource.size} bytes</Typography>}
          </CardContent>
        </Card>
      ))}
    </>
  );
};
