import React from "react";
import PropTypes from "prop-types";
import styled from "styled-components";

const Title = styled.h1`
  font-family: vars(--sans-serif);
  line-height: 1;
  margin: 0 0 2rem 0;
  font-size: ${props =>
    props.fontSize === "super"
      ? "var(--font-scale-3)"
      : props.fontSize === "huge"
        ? "var(--font-scale-4)"
        : props.fontSize === "large"
          ? "var(--font-scale-5)"
          : props.fontSize === "medium"
            ? "var(--font-scale-6)"
            : props.fontSize === "small"
              ? "var(--font-scale-7)"
              : props.fontSize === "tiny" ? "var(--font-scale-8)" : "1em"};

  font-weight: ${props =>
    props.weight === "light"
      ? "var(--font-weight-light)"
      : props.weight === "bold"
        ? "var(--font-weight-bold)"
        : "var(--font-weight-normal)"};

  letter-spacing: ${props =>
    props.letterSpacing === "tight"
      ? "-.1rem"
      : props.letterSpacing === "loose"
        ? ".1rem"
        : props.letterSpacing === "wide" ? ".3rem" : "0"};

  text-transform: ${props => (props.isCaps ? "uppercase" : "none")};
`;

Title.h1 = Title;
Title.h2 = Title.withComponent("h2");
Title.h3 = Title.withComponent("h3");
Title.h4 = Title.withComponent("h4");
Title.h5 = Title.withComponent("h5");
Title.h6 = Title.withComponent("h6");

class Heading extends React.Component {
  render() {
    let TitleHeaderComponent;

    switch (this.props.level) {
      case "1":
        TitleHeaderComponent = Title.h1;
        break;
      case "2":
        TitleHeaderComponent = Title.h2;
        break;
      case "3":
        TitleHeaderComponent = Title.h3;
        break;
      case "4":
        TitleHeaderComponent = Title.h4;
        break;
      case "5":
        TitleHeaderComponent = Title.h5;
        break;
      case "6":
        TitleHeaderComponent = Title.h6;
        break;
      default:
        TitleHeaderComponent = Title.h1;
        break;
    }

    return (
      <TitleHeaderComponent
        fontSize={this.props.size}
        weight={this.props.weight}
        letterSpacing={this.props.letterSpacing}
        isCaps={this.props.isCaps}
      >
        {this.props.children}
      </TitleHeaderComponent>
    );
  }
}

Heading.propTypes = {
  level: PropTypes.oneOf(["1", "2", "3", "4", "5", "6"]).isRequired,
  size: PropTypes.oneOf(["super", "huge", "large", "medium", "small", "tiny"])
    .isRequired,
  weight: PropTypes.oneOf(["light", "normal", "bold"]),
  letterSpacing: PropTypes.oneOf(["tight", "loose", "normal", "wide"]),
  isCaps: PropTypes.bool
};

Heading.defaultProps = {
  level: "1",
  size: "large",
  weight: "light",
  letterSpacing: "loose",
  isCaps: false
};

export default Heading;