import * as React from 'react'
import * as cx from 'classnames'
import { StylableComponent } from '../theme'
import { dasherize, flatten, eventValue } from '../utils'
import { Breakpoint, BREAKPOINTS } from '../theme'
import {
    FlexProps,
    FlexConfig,
    FlexConfigKey,
} from './interfaces'

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

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

    public static defaultProps: FlexProps = {}

    protected defaultClasses: string[] = []

    public render(): JSX.Element {
        return (
            <div {...this.baseProps()}>
                {this.props.children}
            </div>
        )
    }

    protected baseProps(): object {
        const {
            id,
            children,
            onClick,
            tooltip,
            tooltipPos,
            style,
        } = (this.props as FlexProps)

        return {
            id,
            onClick,
            'style': {
                ...this.styles(),
                ...this.flexStyles(),
                ...style,
            },
            'className': this.classNames(),
            'data-tooltip': tooltip,
            'data-tooltip-pos': tooltipPos,
        }
    }

    protected classNames(): string {
        const props = (this.props as FlexProps)

        // Use classnames to build up a string of classnames
        return cx(
            this.defaultClasses,
            styles.container,
            {
                [styles.fullWidth]: props.fullWidth,
                [styles.expandLeft]: props.expand === 'left',
                [styles.expandRight]: props.expand === 'right',
            },
            props.className,
        )
    }

    protected flexStyles(): object {
        const { direction, align, justify } = this.props as FlexProps
        return {
            flexDirection: direction,
            alignItems: align,
            justifyContent: justify,
        }
    }
}