/* eslint-disable filenames/match-regex */
import { CardHeader, Divider } from '@mui/material';
import { styled } from '@mui/material/styles';
import { useTranslate } from 'react-admin';

const StyledCardHeader = styled(CardHeader)(({ theme }) => ({
  marginTop: theme.spacing(2.5),
  marginLeft: 0,
  marginRight: 0,
  paddingLeft: 0,
  paddingRight: 0
}));

const StyledDivider = styled(Divider)(({ theme }) => ({
  marginLeft: `-${theme.spacing(2.5)}`,
  marginRight: `-${theme.spacing(2.5)}`,
  marginBottom: theme.spacing(2),
  width: `calc(100% + ${theme.spacing(5)})`
}));

/**
 * Implements the header of a form.
 * Can be inserted inside a CardForm or a SimpleForm and shows a title with a divider
 * that covers the entire width of the form.
 */
function FormHeader({ title, divider = true, variant = 'h5' }: FormHeaderProps): JSX.Element {
  const translate = useTranslate();
  return (
    <>
      <StyledCardHeader
        title={translate(title, { _: title })}
        titleTypographyProps={{
          variant
        }}
      />
      {divider ? <StyledDivider /> : null}
    </>
  );
}

type FormHeaderProps = {
  title: string;
  divider?: boolean;
  variant?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'subtitle1' | 'subtitle2' | 'body1' | 'body2';
};

export { FormHeader };
export type { FormHeaderProps };