import * as React from 'react'
import * as cx from 'classnames'
import { StylableComponent } from '../theme'
import { Column } from '../flex'
import { Icon } from '../icon'
import { Row } from '../flex'
import { Divider } from '../divider'
import { FormBoxProps } from './interfaces'

const styles = require('../../../src/components/form-box/styles.scss')
const borders = require('../../../src/components/styles/globals/borders.scss')

const xs = {
    flexDirection: 'column',
    justifyContent: 'center',
}

const md = {
    flexDirection: 'row',
    justifyContent: 'flex-start',
}

export class FormBox extends StylableComponent<FormBoxProps> {

    public render() {
        const { IconComponent } = this.props
        return (
            <Column className={this.classNames()}>
                <Row align="center" className={styles.inner}>
                    {IconComponent
                        ? IconComponent
                        : <Icon
                            icon="motorbike"
                            className={styles.icon}
                            fill="primary" size={34} />}
                    <Column>
                        <h4 className={styles.title}>{this.props.title}</h4>
                        <p className={styles.label}>{this.props.subtitle}</p>
                    </Column>
                </Row>
                <Divider dotted={true} />
                <Column className={styles.inner}>
                    {this.props.children}
                    {this.props.errors.length
                        ? <Row className={styles.error}>*{this.props.errors[0]}</Row>
                        : null}
                </Column>
            </Column>
        )
    }

    protected classNames(): string {
        const { valid, errors } = this.props
        return cx(
            this.props.className,
            styles.container,
            {
                [borders.error]: errors.length > 0,
                [borders.success]: valid && !errors.length,
            },
        )
    }
}