import { Button, Modal, Stack, Text, TextInput } from '@mantine/core';
import { useTranslation } from 'react-i18next';
import { ModalFooter } from '@ema-platform/ui';

interface Props {
  opened: boolean;
  name: string;
  onNameChange: (value: string) => void;
  creating: boolean;
  onClose: () => void;
  onCreate: () => void;
}

/** Starts a draft from the live design, or the built-in layout if there is none. */
export function NewVersionModal({
  opened,
  name,
  onNameChange,
  creating,
  onClose,
  onCreate,
}: Props) {
  const { t } = useTranslation();

  return (
    <Modal opened={opened} onClose={onClose} title={t('designer.newVersion', 'New version')}>
      <Stack>
        <TextInput
          label={t('designer.name', 'Version name')}
          value={name}
          onChange={(e) => onNameChange(e.currentTarget.value)}
          withAsterisk
        />
        <Text size="xs" c="dimmed">
          {t(
            'designer.newHint',
            'Starts from the live design, or the built-in layout if this type has none.',
          )}
        </Text>
        <ModalFooter>
          <Button variant="default" onClick={onClose}>
            {t('common.cancel', 'Cancel')}
          </Button>
          <Button loading={creating} disabled={!name.trim()} onClick={onCreate}>
            {t('designer.create', 'Create')}
          </Button>
        </ModalFooter>
      </Stack>
    </Modal>
  );
}