import { forwardRef } from 'react';
import PropTypes from 'prop-types';
import cx from "../../../utils/css/cx.js";
import CustomPropTypes from "../../../utils/prop-types/index.js";
import useResponsiveValues from "../../../hooks/breakpoint/useResponsiveValues/index.js";
import getMarginClasses from "../../../utils/css/getMarginClasses.js";
import classes from './styles.module.scss';
const cls = cx.merge(classes);

/**
 * Renders a title as defined by our typography specifications. Titles are
 * intended as section and subsection headers delineating the structure of
 * content within a page.
 *
 * ```js
 *
 * import { Title } from '@politico/interactive-style';
 * ```
 */
const Title = forwardRef((props, ref) => {
  const {
    as: Tag,
    size,
    weight,
    outlet,
    align,
    margin,
    children
  } = props;
  const sizeValue = useResponsiveValues(size);
  const marginValue = useResponsiveValues(margin);
  const margins = getMarginClasses(marginValue, {
    defaultSide: 'y',
    sides: ['y', 't', 'b']
  });
  return <Tag ref={ref} className={cls(`title-${sizeValue}`, `weight-${weight}`, `outlet-${outlet}`, `align-${align}`, margins)}>
      {children}
    </Tag>;
});
Title.displayName = 'Title';
Title.defaultProps = {
  size: '700',
  weight: 'bold',
  outlet: 'interactive',
  align: undefined,
  margin: undefined,
  children: undefined
};
Title.propTypes = {
  /**
   * The kind of tag to use to render this headline. This is most likely
   * an lower level heading tag, like `h2` or `h3`. Remember that headings
   * communicate the structure of a page to users of assistive technology like
   * screenreaders.
   */
  as: PropTypes.elementType.isRequired,
  size: CustomPropTypes.responsive(PropTypes.oneOf(['700', '600', '500', '400', '300', '200', '100'])),
  weight: PropTypes.oneOf(['bold', 'regular', 'light']),
  outlet: PropTypes.oneOf(['interactive', 'magazine']),
  align: PropTypes.oneOf(['left', 'right', 'center']),
  /**
   * The vertical margins of the Title. Margins can be specified as one
   * spacing value that gets used on both top and bottom, an explicit `y`
   * value, or completely separate `tb` values. The values correspond to levels
   * of our spacing scale (e.g., `"4"` corresponds to `$spacing-4`). Note that
   * `Title` does not support custom horizontal margins.
   */
  margin: CustomPropTypes.responsive(PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
    y: PropTypes.string
  }), PropTypes.shape({
    t: PropTypes.string,
    b: PropTypes.string
  })])),
  children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)])
};
export default Title;