import { Stack } from '@material-hu/mui';
import { useTheme } from '@material-hu/mui/styles';

import FormInputClassic from '@material-hu/components/design-system/Inputs/Classic/form';
import { type FormInputClassicProps } from '@material-hu/components/design-system/Inputs/Classic/types';
import Title from '@material-hu/components/design-system/Title';

export type InputTextProps = FormInputClassicProps & {
  id: string;
  label: string;
  required?: boolean;
  helperText?: string;
};

const InputText = ({
  id,
  label,
  helperText,
  required = false,
  ...formInputProps
}: InputTextProps) => {
  const { palette } = useTheme();

  return (
    <Stack
      id={id}
      sx={{ gap: 1 }}
    >
      <Title
        variant="S"
        title={label}
        description={helperText}
        slotProps={{
          title: {
            id: `${id}-label`,
            sx: {
              ...(required && {
                '&::after': {
                  content: '"*"',
                  color: palette.textColors?.errorText,
                },
              }),
            },
          },
          description: { id: `${id}-helper-text` },
        }}
      />
      <FormInputClassic
        {...formInputProps}
        inputProps={{
          id: `${id}-input`,
          'aria-labelledby': `${id}-label`,
          'aria-describedby': `${id}-helper-text`,
          ...formInputProps.inputProps,
        }}
      />
    </Stack>
  );
};

export default InputText;