import * as React from 'react'
import * as cx from 'classnames'
import { HeaderProps } from '../interfaces'

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

export class Header extends React.Component<HeaderProps, {}> {

    public static defaultProps: Partial<HeaderProps> = {
        size: 'md',
        primary: false,
    }

    public render() {

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

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

    private classNames() {
        const { size, primary } = this.props
        return cx(
            styles.header,
            styles[size || 'md'],
            {
                [styles.primary]: primary,
            },

        )
    }
}