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

interface Props {
    visible: boolean;
    onDismiss: () => void;
    directories: string[];
    onFolderCreated: () => Promise<void>;
}

const CreateFolderModal: React.FC<Props> = ({ visible, onDismiss, directories, onFolderCreated }) => {
    const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
    const { clearAndAddHttpError } = useFlashKey('better-files');
    const targetDirectories = Array.from(
        new Set(
            (directories.length ? directories : ['/']).map((path) => (path.startsWith('/') ? path : `/${path}`))
        )
    );
    const normalizeDirectory = (value: string) => {
        const trimmed = value.trim();
        if (!trimmed || trimmed === '/') return '/';
        const withSlash = trimmed.startsWith('/') ? trimmed : '/' + trimmed;
        return withSlash.replace(/\/+$/, '') || '/';
    };
    const joinDirectoryAndName = (directory: string, folderName: string) => {
        const normalized = normalizeDirectory(directory);
        if (!folderName) return normalized;
        return normalized === '/' ? '/' + folderName : normalized + '/' + folderName;
    };

    return (
        <Dialog
            open={visible}
            onClose={onDismiss}
            title="Create New Folder"
        >
            <div onMouseDown={e => e.stopPropagation()} onClick={e => e.stopPropagation()} className='betterfiles-scope'>
                <Formik
                    initialValues={{
                        name: '',
                        directory: targetDirectories.length === 1 ? targetDirectories[0] : '',
                    }}
                    validationSchema={object().shape({
                        name: string().required('A folder name is required'),
                    })}
                    onSubmit={async (values, { setSubmitting }) => {
                        try {
                            const directoriesToUse =
                                targetDirectories.length === 1
                                    ? [normalizeDirectory(values.directory || targetDirectories[0])]
                                    : targetDirectories;
                            for (const directory of directoriesToUse) {
                                await createFolder(uuid, directory, values.name);
                            }
                            await onFolderCreated();
                            onDismiss();
                        } catch (error) {
                            clearAndAddHttpError(error as Error);
                        } finally {
                            setSubmitting(false);
                        }
                    }}
                >
                    {({ submitForm, values, isSubmitting }) => (
                        <Form>
                            <Field
                                autoFocus
                                id="name"
                                name="name"
                                label="Folder Name"
                            />
                            {targetDirectories.length === 1 && (
                                <Field
                                    id="directory"
                                    name="directory"
                                    label="Directory (optional)"
                                    description="Override the target directory for this folder."
                                />
                            )}
                            {targetDirectories.length === 1 ? (
                                <p className="mt-2 text-sm text-neutral-300">
                                    Will be created at:{' '}
                                    <Code>
                                        {joinDirectoryAndName(values.directory || targetDirectories[0], values.name)}
                                    </Code>
                                </p>
                            ) : (
                                <p className="mt-2 text-sm text-neutral-300">
                                    Will be created in <Code>{targetDirectories.length}</Code> directories.
                                </p>
                            )}
                            <Dialog.Footer>
                                <Button.Text onClick={onDismiss}>
                                    Cancel
                                </Button.Text>
                                <Button onClick={submitForm} disabled={isSubmitting}>
                                    Create Folder
                                </Button>
                            </Dialog.Footer>
                        </Form>
                    )}
                </Formik>
            </div>
        </Dialog>
    );
};

export default CreateFolderModal;