import Stack from '@mui/material/Stack';
import TextField from '@mui/material/TextField';

import { createPropertyGroup } from '../api/language/propertyGroup.api';
import CreateEntityDialog from './CreateEntityDialog';
import type { PropertyGroup } from '../data/propertyGroup';

type PropertyGroupCreateDialogProps = {
    open: boolean;
    onClose: () => void;
    onCreated: (propertyGroup: PropertyGroup) => void | Promise<void>;
};

type PropertyGroupFormState = {
    label: string;
    description: string;
};

const initialFormState: PropertyGroupFormState = {
    label: '',
    description: '',
};

const PropertyGroupCreateDialog = ({ open, onClose, onCreated }: PropertyGroupCreateDialogProps) => {
    return (
        <CreateEntityDialog
            open={open}
            title="New Property Group"
            initialState={initialFormState}
            onClose={onClose}
            onCreated={onCreated}
            createEntity={(formState) => createPropertyGroup({ id: 0, label: formState.label, description: formState.description })}
            errorMessageText="Creating the property group failed."
        >
            {({ formState, setFormState }) => (
                <Stack spacing={2} sx={{ pt: 1 }}>
                    <TextField
                        autoFocus
                        required
                        label="Label"
                        value={formState.label}
                        onChange={(event) => setFormState((currentState) => ({ ...currentState, label: event.target.value }))}
                    />
                    <TextField
                        required
                        label="Description"
                        value={formState.description}
                        onChange={(event) => setFormState((currentState) => ({ ...currentState, description: event.target.value }))}
                    />
                </Stack>
            )}
        </CreateEntityDialog>
    );
};

export default PropertyGroupCreateDialog;