import * as React from "react"
import styled, { css } from "styled-components"
import breakpoint from "styled-components-breakpoint"
const HeaderCSS = css`
  font-family: "-DB-HeaventRounded", "Thonburi", "Tahoma", "Arial", sans-serif;
  font-weight: 600;
  margin: 0;
`

const H1 = styled.h1.attrs({
  className: "Header"
})`
  ${HeaderCSS}
  font-weight: 700;
  padding: 5px 5px;
  ${breakpoint("mobile")`
    font-size: 1.5rem;
    line-height: normal;
  `}
  ${breakpoint("tablet")`
    font-size: 1.75rem;
    line-height: normal;
  `}
  ${breakpoint("desktop")`
    font-size: 2.1rem;
  `}
`

const H2 = styled.h2.attrs({
  className: "Header"
})`
  ${HeaderCSS} font-size: 1.8rem;
  font-weight: 700;
  @media screen and (max-width: 768px) {
    font-size: 1.5rem;
  }
  @media screen and (max-width: 480px) {
    font-size: 1.3rem;
  }
`

const H3 = styled.h3.attrs({
  className: "Header"
})`
  ${HeaderCSS} font-size: 1.3rem;
  font-weight: 600;
  @media screen and (max-width: 480px) {
    font-size: 1.2rem;
  }
`

const H4 = styled.h4.attrs({
  className: "Header"
})`
  ${HeaderCSS} font-size: 1.15rem;
  font-weight: 600;
  @media screen and (max-width: 480px) {
  }
`

const HH = styled.header`
  ${HeaderCSS};
`

export enum HeaderSize {
  one = "one",
  two = "two",
  three = "three",
  four = "four"
}

type HeaderPropTypes = React.HTMLAttributes<HTMLHeadingElement> & {
  one?: any
  two?: any
  three?: any
  four?: any
  size?: HeaderSize
}

export class Header extends React.Component<HeaderPropTypes, {}> {
  public render() {
    const { props } = this
    let Component: any = HH
    if (props.one) {
      Component = H1
      console.warn(
        `Header one attribute is going to deprected soon, please use size attribute`,
        new Error().stack
      )
    } else if (props.two) {
      Component = H2
      console.warn(
        `Header two attribute is going to deprected soon, please use size attribute`,
        new Error().stack
      )
    } else if (props.three) {
      Component = H3
      console.warn(
        `Header three attribute is going to deprected soon, please use size attribute`,
        new Error().stack
      )
    } else if (props.four) {
      Component = H4
      console.warn(
        `Header four attribute is going to deprected soon, please use size attribute`,
        new Error().stack
      )
    }

    if (props.size) {
      switch (props.size) {
        case HeaderSize.one: {
          return <H1 {...props} />
        }
        case HeaderSize.two: {
          return <H2 {...props} />
        }
        case HeaderSize.three: {
          return <H3 {...props} />
        }
        case HeaderSize.four: {
          return <H4 {...props} />
        }
      }
    }
    return <Component {...props} />
  }
}

export default Header