/* eslint-disable react/jsx-props-no-spreading */
import React from 'react';
import styled from 'styled-components';
import HelperText, { FormHelperTextProps } from '@material-ui/core/FormHelperText';

import { ThemeObject } from '../Theme';

const getLabelColor = (theme: ThemeObject, isError: boolean, isFocused = false) => {
  if (isError) return theme.pallet.error;
  return isFocused ? theme.pallet.primaryColor : theme.text.secondary;
};

export const StyledHelperText = styled((props: FormHelperTextProps & { $theme: ThemeObject }) => (
  <HelperText {...props} classes={{ root: props.className }} />
))`
  && {
    color: ${(props) => getLabelColor(props.$theme, props.error ?? false)} !important;
  }
`;
