import * as React from 'react'
import * as cx from 'classnames'
import { HeaderProps } from './interfaces'
import { StylableComponent } from '../theme'
import { BaseText } from '../text'

const styles = require('../../../src/components/header/styles.scss')

export class Header extends BaseText<HeaderProps> {

    public sizes = {
        xxs: 14,
        xs: 16,
        sm: 18,
        md: 20,
        lg: 22,
        xl: 24,
        xxl: 26,
    }

    public render() {

        const { children, size, id } = this.props

        const childProps = {
            id,
            style: this.styles(),
            className: this.classNames(),
        }

        switch (size) {
            case 'xxs':
            case 'xs':
                return <h5 {...childProps}>{children}</h5>
            case 'sm':
                return <h4 {...childProps}>{children}</h4>
            case 'md':
                return <h3 {...childProps}>{children}</h3>
            case 'lg':
                return <h2 {...childProps}>{children}</h2>
            case 'xl':
            case 'xxl':
                return <h1 {...childProps}>{children}</h1>
            default:
                throw new Error(`Invalid header size: ${size}`)
        }
    }

    public classNames() {
        return cx(this.props.className, styles.header)
    }
}