import React from 'react';
import { Form, Formik } from 'formik';
import { object, string } from 'yup';
import { ServerContext } from '@/state/server';
import { renameFile } from '../api/server/files/index';
import { useFlashKey } from '../useFlash';
import { Dialog } from '@/components/elements/dialog';
import { Button } from '@/components/elements/button';
import Field from '@/components/elements/Field';

interface Props {
    visible: boolean;
    onDismiss: () => void;
    file: string;
    onRenamed: () => Promise<void>;
}

const RenameModal: React.FC<Props> = ({ visible, onDismiss, file, onRenamed }) => {
    const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
    const { clearAndAddHttpError } = useFlashKey('better-files');

    const directory = file.substring(0, file.lastIndexOf('/')) || '/';
    const name = file.substring(file.lastIndexOf('/') + 1);

    return (
        <Dialog
            open={visible}
            onClose={onDismiss}
            title="Rename"
        >
            <div onMouseDown={e => e.stopPropagation()} onClick={e => e.stopPropagation()}>
                <Formik
                    initialValues={{ name }}
                    validationSchema={object().shape({
                        name: string().required('A name is required'),
                    })}
                    onSubmit={async (values, { setSubmitting }) => {
                        try {
                            await renameFile(uuid, directory, [{ from: name, to: values.name }]);
                            await onRenamed();
                            onDismiss();
                        } catch (error) {
                            clearAndAddHttpError(error as Error);
                        } finally {
                            setSubmitting(false);
                        }
                    }}
                >
                    {({ submitForm, isSubmitting }) => (
                        <Form>
                            <Field
                                autoFocus
                                id="name"
                                name="name"
                                label="New Name"
                            />
                            <Dialog.Footer>
                                <Button.Text onClick={onDismiss}>
                                    Cancel
                                </Button.Text>
                                <Button onClick={submitForm} disabled={isSubmitting}>
                                    Rename
                                </Button>
                            </Dialog.Footer>
                        </Form>
                    )}
                </Formik>
            </div>
        </Dialog>
    );
};

export default RenameModal;