import * as React from 'react'
import * as cx from 'classnames'
import { StylableComponent } from '../theme'
import { ButtonBarProps } from './interfaces'
import { Row } from '../flex'

const styles = require('../../../src/components/button-bar/styles.scss')

export class ButtonBar extends StylableComponent<ButtonBarProps> {

    public static defaultProps = {
            primary: true,
        }
    /**
     * If the button bar is primary then the
     * children need to be secondary and vice versa
     */
    public render(): JSX.Element {
        const { id, className, children, primary } = this.props
        return (
            <Row id={id}
                justify="center"
                className={cx(className, styles.buttonBar)}
                style={this.styles()}>
                {React.Children.map(children, (child: JSX.Element) =>
                    React.cloneElement(child, {
                        primary: primary ? false : true,
                    }),
                )}
            </Row>
        )
    }

    public styles() {
        const { style, primary} = this.props
        return {
            ...style,
            backgroundColor: primary ? this.primary() : 'inherit',

        }
    }
}