import React, { HTMLAttributes, forwardRef } from "react";
import classnames from "classnames";
import { Text } from "../Text";
import { bemHOF } from "../../utilities/bem";

const cn = bemHOF("Heading");

export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
  as?: string;
}

const Heading = forwardRef<HTMLElement, HeadingProps>((props, ref) => {
  const { children, className, ...rest } = props;
  const classes = classnames(cn(), className);

  return (
    <Text ref={ref} className={classes} {...rest}>
      {children}
    </Text>
  );
});

const H1 = forwardRef<HTMLHeadingElement, HeadingProps>((props, ref) => {
  const { className, ...rest } = props;
  return (
    <Heading
      as="h1"
      ref={ref}
      className={classnames(cn({ m: "h1" }), className)}
      {...rest}
    />
  );
});

const H2 = forwardRef<HTMLHeadingElement, HeadingProps>((props, ref) => {
  const { className, ...rest } = props;
  return (
    <Heading
      as="h2"
      ref={ref}
      className={classnames(cn({ m: "h2" }), className)}
      {...rest}
    />
  );
});

const H3 = forwardRef<HTMLHeadingElement, HeadingProps>((props, ref) => {
  const { className, ...rest } = props;
  return (
    <Heading
      as="h3"
      ref={ref}
      className={classnames(cn({ m: "h3" }), className)}
      {...rest}
    />
  );
});

const H4 = forwardRef<HTMLHeadingElement, HeadingProps>((props, ref) => {
  const { className, ...rest } = props;
  return (
    <Heading
      as="h4"
      ref={ref}
      className={classnames(cn({ m: "h4" }), className)}
      {...rest}
    />
  );
});

const H5 = forwardRef<HTMLHeadingElement, HeadingProps>((props, ref) => {
  const { className, ...rest } = props;
  return (
    <Heading
      as="h5"
      ref={ref}
      className={classnames(cn({ m: "h5" }), className)}
      {...rest}
    />
  );
});

const H6 = forwardRef<HTMLHeadingElement, HeadingProps>((props, ref) => {
  const { className, ...rest } = props;
  return (
    <Heading
      as="h6"
      ref={ref}
      className={classnames(cn({ m: "h6" }), className)}
      {...rest}
    />
  );
});

const CompoundHeading = Object.assign(Heading, {
  H1,
  H2,
  H3,
  H4,
  H5,
  H6,
});

export { CompoundHeading as Heading };