import * as React from 'react'
import * as cx from 'classnames'

import { mkNonPropagatingClick } from '../utils'

import {
    ActionBoxProps,
    Action,
} from '../interfaces'

import {
} from '../constants'

import { Column } from './column'
import { Icon } from './icon'
import { Row } from './row'

const styles = require('../../src/styles/components/action-box.scss')
const display = require('../../src/styles/common/display.scss')

export class ActionBox extends React.Component<ActionBoxProps, any> {
    public render(): JSX.Element {
        const { hidden } = this.props
        return (
            <Row
                className={cx(styles.container)}
                style={{
                    display: hidden ? 'none' : undefined,
                }}>
                {this.actionNodes()}
            </Row>
        )
    }

    private actionNodes(): JSX.Element[] {
        const { actions } = this.props

        return actions.map(action =>
            <ActionNode
                key={action.className}
                {...action}
            />,
        )
    }
}

const ActionNode = ({
    className,
    icon,
    tooltip,
    onClick,
    disabled,
    strokeIcon,
    iconProps,
 }: Action): JSX.Element =>
    <Column
        className={cx(`action-${className}`, styles.item)}
        onClick={mkNonPropagatingClick(onClick)}
        style={{ position: 'relative' }}
        data-tooltip={tooltip}
        data-tooltip-pos="down">

        <Icon
            icon={icon}
            size={18}
            stroke={strokeIcon ? 'primary' : 'none'}
            fill={strokeIcon ? 'none' : 'primary'}
            containerClassName={cx(styles.icon, {
                [styles.disabled]: disabled && !strokeIcon,
                [styles.disabledStroke]: disabled && strokeIcon,
            })}
            {...iconProps} />

        {disabled
            ? (
                <div className={styles.statusIcon}>
                    <Icon icon="warning-triangle" size={12} />
                </div>
            )
            : null}
    </Column>