import { Box, useTheme, Container, Typography, Button } from '@mui/material';
import { useDropzone } from 'react-dropzone';
import { uploadFiles } from './utils/upload';
import { FileText, CloudUpload as UploadIcon } from 'lucide-react';
import { uploadFileChunked } from './utils/upload-chunk';
export const UploadButton = (props: { prefix?: string; onUpload?: (res: any) => void }) => {
  const onDrop = async (acceptedFiles) => {
    console.log(acceptedFiles);
    if (acceptedFiles.length > 1) {
      const res = await uploadFiles(acceptedFiles, { directory: props.prefix });
      console.log('uploadFiles res', res);
      props.onUpload?.(res);
    } else if (acceptedFiles.length === 1) {
      const res = await uploadFileChunked(acceptedFiles[0], { directory: props.prefix });
      console.log('uploadFiles res', res);
      props.onUpload?.(res);
    }
  };
  const { getRootProps, getInputProps } = useDropzone({ onDrop });
  return (
    <Box {...getRootProps()}>
      <Button
        color='primary'
        sx={{
          minWidth: 'unset',
          padding: '2px',
        }}>
        <UploadIcon />
      </Button>
      <input type='file' style={{ display: 'none' }} {...getInputProps()} />
    </Box>
  );
};
export const Upload = () => {
  const onDrop = async (acceptedFiles) => {
    console.log(acceptedFiles);
    if (acceptedFiles.length > 1) {
      const res = await uploadFiles(acceptedFiles, {});
      console.log('uploadFiles res', res);
    } else if (acceptedFiles.length === 1) {
      const res = await uploadFileChunked(acceptedFiles[0], {});
      console.log('uploadFiles res', res);
    }
  };

  const { getRootProps, getInputProps } = useDropzone({ onDrop });
  const theme = useTheme();
  return (
    <Box
      sx={{
        backgroundColor: theme.palette.background.paper,
        padding: { xs: '16px', sm: '32px' },
        borderRadius: '8px',
        margin: { xs: '16px', sm: '32px' },
        boxShadow: '0 0 10px 0 rgba(0, 0, 0, 0.1)',
      }}>
      <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 Upload
        </Typography>
      </div>
      <Box
        {...getRootProps()}
        sx={{
          border: '2px dashed',
          borderColor: theme.palette.secondary.main,
          borderRadius: '8px',
          padding: { xs: '16px', sm: '32px' },
          margin: { xs: '16px', sm: '32px' },
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          gap: '16px',
          '&:hover': {
            borderColor: theme.palette.primary.main,
          },
          transition: 'border-color 200ms',
          textAlign: 'center',
        }}>
        <UploadIcon style={{ width: '48px', height: '48px', color: theme.palette.secondary.main }} />
        <label style={{ cursor: 'pointer' }}>
          <input type='file' style={{ display: 'none' }} {...getInputProps()} />
          <Box sx={{ color: theme.palette.secondary.main, '&:hover': { color: theme.palette.primary.main } }}>Click to upload or drag and drop</Box>
        </label>
      </Box>
    </Box>
  );
};
