import { FormProvider, useFormContext } from 'react-hook-form';

import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import HuFormInputClassic from '@material-hu/components/design-system/Inputs/Classic/form';

import useHuGoTheme from 'src/hooks/useHuGoTheme';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { validateRequiredStringRule } from 'src/utils/validation';

const New = ({ edit }: { edit?: boolean }) => {
  const { t } = useLokaliseTranslation('workflows');
  const HuGoThemeProvider = useHuGoTheme();
  const form = useFormContext();

  return (
    <HuGoThemeProvider>
      <FormProvider {...form}>
        <Stack sx={{ height: '100%', gap: 2 }}>
          <Typography variant="globalS">
            {t(edit ? 'edit_workflow_title' : 'new_workflow_subtitle')}
          </Typography>
          <Stack
            sx={{
              backgroundColor: ({ palette }) =>
                palette.new.background.elements.grey,
              borderRadius: 2,
              gap: 2,
              p: 2,
            }}
          >
            <HuFormInputClassic
              inputProps={{
                label: `${t('workflow_name')}*`,
                placeholder: t('write_here'),
                maxLength: 255,
                errorText:
                  (form.formState.errors.title?.message as string) ||
                  t('required_name'),
              }}
              rules={{ validate: validateRequiredStringRule }}
              name="title"
            />
            <HuFormInputClassic
              inputProps={{
                label: t('description'),
                placeholder: t('write_here'),
                maxLength: 650,
                multiline: true,
              }}
              name="description"
            />
          </Stack>
        </Stack>
      </FormProvider>
    </HuGoThemeProvider>
  );
};

export default New;