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

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

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

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

export class FormBox extends React.Component<FormBoxProps, any> {

    public render() {
        const { IconComponent } = this.props
        return (
            <Column className={this.classNames()}>
                {/* JAMES PLEASE MAKE THIS WORK: <Row align="center" xs={xs} md ={md}>}*/}
                <Row column="xs" row="md" 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,
            },
        )
    }
}