import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { useCallback, useState, } from 'react';
import { useTranslation } from 'react-i18next';
import { Button, Typography } from 'antd';
import { FileOutlined } from '@ant-design/icons';
import { LabelledTextInput } from '../text-input';
import { LabelledDirectoryInput } from '../directory-input';
import { LabelledCheckbox } from '../checkbox';
import { Modal } from '../../../../components';
import { toKebabCase } from '../../../../../utils/to-kebab-case';
import { persistentStorage } from '../../../../../persistent-storage';
import { getFileName, getFilePath, getDefaultDirectory, } from './utils';
import { ModalContentStyled, HeaderCSS, HeaderIconCSS, ModalFooterStyled, ButtonCSS, } from './entity-picker.style';
export const CreateNewModal = ({ open, type, onClose, onCreate, }) => {
    const { t } = useTranslation();
    const [baseDirectory, setBaseDirectory] = useState(() => persistentStorage.get(`inspector.createNewModal.baseDirectory.${type}`, getDefaultDirectory(type)));
    const [subdirectory, setSubdirectory] = useState('');
    const [filename, setFilename] = useState('');
    const [name, setName] = useState('');
    const [customizePath, setCustomizePath] = useState(false);
    const handleCreate = useCallback(() => {
        onCreate(name, getFilePath(baseDirectory, subdirectory, filename));
        persistentStorage.set(`inspector.createNewModal.baseDirectory.${type}`, baseDirectory);
        onClose();
    }, [onCreate, onClose, baseDirectory, subdirectory, filename, name]);
    const handleChangeBaseDirectory = useCallback((value) => {
        setBaseDirectory(value);
    }, []);
    const handleChangeName = useCallback((value) => {
        setName(value);
        if (!customizePath) {
            setFilename(getFileName(value, type));
            setSubdirectory(toKebabCase(value));
        }
    }, [customizePath, type]);
    const handleChangeCustomizePath = useCallback((value) => {
        setCustomizePath(value);
        if (!value) {
            setFilename(getFileName(name, type));
            setSubdirectory(toKebabCase(name));
        }
    }, [name, type]);
    const handleChangeSubdirectory = useCallback((value) => setSubdirectory(value), []);
    const handleChangeFilename = useCallback((value) => setFilename(value), []);
    return (_jsxs(Modal, { title: t(`inspector.entityPicker.createNew.modal.${type}.title`), open: open, onCancel: onClose, width: 640, children: [_jsxs(Typography.Text, { css: HeaderCSS, children: [_jsx(FileOutlined, { css: HeaderIconCSS }), `${t('inspector.entityPicker.createNew.modal.field.path.label')} "${getFilePath(baseDirectory, subdirectory, filename)}"`] }), _jsxs(ModalContentStyled, { children: [_jsx(LabelledDirectoryInput, { label: t('inspector.entityPicker.createNew.modal.field.baseDirectory.label'), value: baseDirectory, onChange: handleChangeBaseDirectory }), _jsx(LabelledTextInput, { label: t('inspector.entityPicker.createNew.modal.field.name.label'), value: name, onChange: handleChangeName }), _jsx(LabelledCheckbox, { label: t('inspector.entityPicker.createNew.modal.field.customizePath.label'), value: customizePath, onChange: handleChangeCustomizePath }), _jsx(LabelledTextInput, { label: t('inspector.entityPicker.createNew.modal.field.subdirectory.label'), value: subdirectory, onChange: handleChangeSubdirectory, disabled: !customizePath }), _jsx(LabelledTextInput, { label: t('inspector.entityPicker.createNew.modal.field.filename.label'), value: filename, onChange: handleChangeFilename, disabled: !customizePath })] }), _jsxs(ModalFooterStyled, { children: [_jsx(Button, { css: ButtonCSS, onClick: onClose, children: t('inspector.entityPicker.createNew.modal.button.cancel.label') }), _jsx(Button, { css: ButtonCSS, type: "primary", onClick: handleCreate, children: t('inspector.entityPicker.createNew.modal.button.create.label') })] })] }));
};
