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';
import { filterFiles } from './utils/filter-files';
import { IconButton } from '@kevisual/components/button/index.tsx';
import { uploadChunkV2 } from './v2/upload-chunk';
import { uploadFilesV2 } from './v2/upload';
import dayjs from 'dayjs';

type UploadButtonProps = {
  /**
   * 前缀
   */
  directory?: string;
  /**
   * 应用key
   */
  appKey?: string;
  /**
   * 版本
   */
  version?: string;
  /**
   * 用户名
   */
  username?: string;
  /**
   * 上传回调
   */
  onUpload?: (res: any) => void;
  /**
   * 是否上传文件夹
   */
  uploadDirectory?: boolean;
  /**
   * 是否只显示图标
   */
  onlyIcon?: boolean;
  /**
   * 上传图标
   */
  icon?: React.ReactNode;
};
/**
 * 上传按钮
 * @param props
 * @returns
 */
export const UploadButton = (props: UploadButtonProps) => {
  const { onlyIcon = false, icon } = props;
  const { appKey, version, username, directory } = props;
  const onDrop = async (acceptedFiles) => {
    console.log(acceptedFiles);
    acceptedFiles = filterFiles(acceptedFiles);
    if (acceptedFiles.length > 1) {
      const res = await uploadFilesV2(acceptedFiles, { directory, appKey, version, username });
      props.onUpload?.(res);
    } else if (acceptedFiles.length === 1) {
      const res = await uploadChunkV2(acceptedFiles[0], { directory, appKey, version, username });
      props.onUpload?.(res);
    }
  };
  const { getRootProps, getInputProps } = useDropzone({ onDrop });
  const uploadCom = (
    <div {...getRootProps()}>
      {icon || <UploadIcon />}
      <input
        type='file'
        style={{ display: 'none' }}
        {...getInputProps()}
        // @ts-ignore
        webkitdirectory={props.uploadDirectory ? 'true' : undefined}
        mozdirectory={props.uploadDirectory ? 'true' : undefined}
      />
    </div>
  );
  if (onlyIcon) {
    return uploadCom;
  }
  return <IconButton color='primary'>{uploadCom}</IconButton>;
};
export const Upload = ({ uploadDirectory = false }: { uploadDirectory?: boolean }) => {
  const onDrop = async (acceptedFiles) => {
    acceptedFiles = filterFiles(acceptedFiles);
    const directory = dayjs().format('YYYY-MM-DD');
    if (acceptedFiles.length > 1) {
      const res = await uploadFilesV2(acceptedFiles, { directory });
    } else if (acceptedFiles.length === 1) {
      const res = await uploadChunkV2(acceptedFiles[0], { directory });
    }
  };

  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()}
            // @ts-ignore
            webkitdirectory={uploadDirectory ? 'true' : undefined}
            mozdirectory={uploadDirectory ? 'true' : undefined}
          />
          <Box sx={{ color: theme.palette.secondary.main, '&:hover': { color: theme.palette.primary.main } }}>Click to upload or drag and drop</Box>
        </label>
      </Box>
    </Box>
  );
};
