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

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

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

const MAX_CHARS = 250;

type Props = {
  isRegion?: boolean;
};

const DetailsStep = ({ isRegion = false }: Props) => {
  const { t } = useLokaliseTranslation(['regions', 'general']);

  return (
    <Stack>
      <CardContainer
        fullWidth
        sx={{ mb: 2 }}
      >
        <FormInputClassic
          name={isRegion ? 'title' : 'name'}
          inputProps={{
            label: isRegion
              ? t('regions:region_name')
              : t('regions_sites:site_name'),
            maxLength: 128,
            hasCounter: false,
            placeholder: t('general:name'),
          }}
          rules={{ validate: validateRequiredStringRule }}
        />
      </CardContainer>
      <CardContainer fullWidth>
        <FormInputClassic
          name="body"
          inputProps={{
            label: isRegion
              ? t('regions:region_description')
              : t('regions_sites:site_description'),
            maxLength: MAX_CHARS,
            multiline: true,
            minRows: 3,
            hasCounter: false,
            placeholder: t('general:description'),
          }}
        />
      </CardContainer>
    </Stack>
  );
};

export default DetailsStep;