'use strict';

import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';

export class BorderedListItem extends React.Component {
    static propTypes = {
        active: PropTypes.bool,
        children: PropTypes.node,
        className: PropTypes.string
    };

    static defaultProps = {
        active: false,
        children: null,
        className: null
    };

    render() {
        let {active, children, className, ...props} = this.props;

        let classNames = classnames('bordered-list-item', className, {
            active: active
        });

        return (
            <div className={classNames} {...props}>
                {children}
            </div>
        );
    }
}

export class BorderedList extends React.Component {
    static propTypes = {
        noTopBorder: PropTypes.bool,
        noBottomBorder: PropTypes.bool,
        noHorizontalBorders: PropTypes.bool,
        noLeftBorder: PropTypes.bool,
        noRightBorder: PropTypes.bool,
        noVerticalBorders: PropTypes.bool,
        className: PropTypes.string,
        children: PropTypes.node
    };

    static defaultProps = {
        noTopBorder: false,
        noBottomBorder: false,
        noHorizontalBorders: false,
        noLeftBorder: false,
        noRightBorder: false,
        noVerticalBorders: false,
        className: null,
        children: null
    };

    render() {
        let {
            noTopBorder,
            noBottomBorder,
            noHorizontalBorders,
            noLeftBorder,
            noRightBorder,
            noVerticalBorders,
            className,
            children,
            ...props
        } = this.props;

        let classNames = classnames('bordered-list', className, {
            'bordered-list-noTopBorder': noTopBorder,
            'bordered-list-noBottomBorder': noBottomBorder,
            'bordered-list-noHorizontalBorders': noHorizontalBorders,
            'bordered-list-noLeftBorder': noLeftBorder,
            'bordered-list-noRightBorder': noRightBorder,
            'bordered-list-noVerticalBorders': noVerticalBorders
        });

        return (
            <div className={classNames} {...props}>
                {children}
            </div>
        );
    }
}
