import * as React from 'react'
import * as cx from 'classnames'
import { StylableComponent } from '../theme'
import { TextProps, Sizes } from './interfaces'

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

export abstract class BaseText<T> extends StylableComponent<T> {

    public static defaultProps: any = {
        size: 'md',
        primary: false,
    }

    public sizes: Sizes = {
        xxs: 8,
        xs: 10,
        sm: 12,
        md: 14,
        lg: 16,
        xl: 18,
        xxl: 20,
    }

    public classNames() {
        return cx((this.props as any).className)
    }

    public styles() {
        return {
            ...(this.props as any).style,
            color: this.color(),
            fontSize: this.sizes[(this.props as any).size || 'md'],
        }
    }

    public color = () => {
        let res
        const { color, shade, primary, secondary, success, warning, error } = (this.props as any)

        if (primary) {
            res = this.primary(shade || 500)
        } else if (secondary) {
            res = this.secondary(shade || 500)
        } else if (success) {
            res = this.success(shade || 500)
        } else if (success) {
            res = this.warning(shade || 500)
        } else if (success) {
            res = this.error(shade || 500)
        } else if (color) {
            res = color
        } else {
            res = this.gray(shade || 900)
        }

        return res
    }
}