import { InputBaseComponentProps } from '@material-hu/mui/InputBase';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

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

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

const MAX_CHARS = 250;

type FieldProps = {
  helperText?: string;
  inputProps?: InputBaseComponentProps;
  label?: string;
  placeholder?: string;
};

type Props = {
  descriptionProps?: FieldProps;
  descriptionSubtitle?: string;
  nameProps?: FieldProps;
  nameSubtitle?: string;
  subtitle?: string;
  title?: string;
  isEdit?: boolean;
};

const GeneralDataStep = ({
  descriptionProps,
  descriptionSubtitle,
  nameProps,
  nameSubtitle,
  subtitle,
  title,
  isEdit,
}: Props) => {
  const textFields = (
    <>
      {nameSubtitle && (
        <Typography
          variant="globalS"
          sx={{ fontWeight: 'semiBold', mb: 1 }}
        >
          {nameSubtitle}
        </Typography>
      )}
      <HuFormInputClassic
        name="name"
        inputProps={{
          placeholder: nameProps?.placeholder,
          helperText: nameProps?.helperText,
          maxLength: 128,
          hasCounter: false,
          sx: { mb: 3 },
        }}
        rules={{ validate: validateRequiredStringRule }}
      />
      {descriptionSubtitle && (
        <Typography
          variant="globalS"
          sx={{ fontWeight: 'semiBold', mb: 1 }}
        >
          {descriptionSubtitle}
        </Typography>
      )}
      <HuFormInputClassic
        name="description"
        inputProps={{
          placeholder: descriptionProps?.placeholder,
          helperText: descriptionProps?.helperText,
          maxLength: MAX_CHARS,
          multiline: true,
          minRows: 1,
          hasCounter: false,
        }}
      />
    </>
  );

  return (
    <Stack>
      {title && (
        <Typography
          variant="globalL"
          sx={{ fontWeight: 'fontWeightSemiBold' }}
        >
          {title}
        </Typography>
      )}
      {subtitle && (
        <Typography
          variant="globalS"
          sx={{ color: theme => theme.palette.new.text.neutral.lighter }}
        >
          {subtitle}
        </Typography>
      )}
      {isEdit && (
        <HuCardContainer
          sx={{
            width: '100%',
            mt: 4,
            '.MuiCardContent-root': {
              p: 3,
            },
          }}
        >
          {textFields}
        </HuCardContainer>
      )}
      {!isEdit && textFields}
    </Stack>
  );
};

export default GeneralDataStep;