import { Button, Dialog, DialogActions, DialogContent, DialogTitle, TextField } from '@mui/material';
import { useTheme } from '@kevisual/components/theme/index.js';
import { useTranslation } from 'react-i18next';
import { useEffect, useState } from 'react';
import { toast } from 'react-toastify';
import { createDirectory } from './utils/create-directory';
import { ConvertOpts } from './utils/upload-chunk';
import { useResourceFileStore } from '../store/resource-file';
type DialogDirectoryProps = {
  open: boolean;
  onClose: () => void;
  onSuccess: (directory: string) => void;
  prefix?: string;
  opts?: ConvertOpts;
};

/**
 * 创建目录
 * @param props
 * @returns
 */
export const DialogDirectory = (props: DialogDirectoryProps) => {
  const { open, onClose, onSuccess, prefix, opts } = props;
  const theme = useTheme();
  const [directory, setDirectory] = useState('');
  const defaultProps = theme.components?.MuiTextField?.defaultProps as any;
  const { t } = useTranslation();
  useEffect(() => {
    setDirectory('');
  }, [open]);
  const onClick = async () => {
    if (!directory) {
      toast.error(t('directory_name_required'));
      return;
    }
    if (directory.startsWith('.') || directory.endsWith('.')) {
      toast.error(t('directory_name_invalid'));
      return;
    }
    if (directory.startsWith('/') || directory.endsWith('/')) {
      toast.error(t('directory_name_invalid'));
      return;
    }
    if (directory.includes('//')) {
      toast.error(t('directory_name_invalid'));
      return;
    }
    const res = await createDirectory(prefix ? `${prefix}/${directory}` : directory, opts);
    if (res?.code === 200) {
      if (onSuccess) {
        onSuccess(prefix ? `${prefix}/${directory}` : directory);
      } else {
        toast.success(t('create_directory_success'));
        onClose();
      }
    } else {
      toast.error(res.message);
    }
  };
  return (
    <Dialog open={open} onClose={onClose}>
      <DialogTitle>{t('create_directory')}</DialogTitle>
      <DialogContent>
        <div className='min-w-[400px] py-4'>
          <TextField {...defaultProps} value={directory} onChange={(e) => setDirectory(e.target.value)} label='目录名' />
        </div>
      </DialogContent>
      <DialogActions>
        <Button onClick={onClose}>{t('Cancel')}</Button>
        <Button onClick={onClick}>{t('Submit')}</Button>
      </DialogActions>
    </Dialog>
  );
};

type DialogDeleteDirectoryProps = {
  open: boolean;
  onClose: () => void;
  onSuccess: (directory: string) => void;
  prefix?: string;
};
export const DialogDeleteDirectory = (props: DialogDeleteDirectoryProps) => {
  const { open, onClose, onSuccess, prefix } = props;
  const { t } = useTranslation();
  const { deleteDirectory } = useResourceFileStore();
  const onClick = async () => {
    if (!prefix) {
      toast.error(t('directory_name_required'));
      return;
    }
    await deleteDirectory(prefix!, {
      onSuccess: () => {
        if (onSuccess) {
          onSuccess(prefix!);
        } else {
          onClose();
        }
      },
    });
  };
  return (
    <Dialog open={open} onClose={onClose}>
      <DialogTitle>{t('delete_directory')}</DialogTitle>
      <DialogContent>
        <div className='min-w-[400px]'>确认删除目录: {`${prefix}/`}</div>
      </DialogContent>
      <DialogActions>
        <Button onClick={onClose}>{t('Cancel')}</Button>
        <Button onClick={onClick}>{t('Submit')}</Button>
      </DialogActions>
    </Dialog>
  );
};
