import * as React from 'react'
import * as cx from 'classnames'
import { ActionBoxProps, ActionNodeProps } from './interfaces'
import { StylableComponent } from '../theme'
import { Column } from '../flex'
import { Icon } from '../icon'
import { Row } from '../flex'

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

export class ActionBox extends StylableComponent<ActionBoxProps> {

    public render(): JSX.Element {
        const { hidden, children } = this.props
        return (
            <Row
                className={cx(styles.container)}
                style={{
                    display: hidden ? 'none' : undefined,
                }}>
                {children}
            </Row>
        )
    }
}

export class ActionNode extends StylableComponent<ActionNodeProps> {

    public render() {
        const {
            className,
            icon,
            tooltip,
            tooltipPos,
            onClick,
            disabled,
            strokeIcon,
            iconProps,
        } = this.props

        return (
            <Column
                className={cx(`action-${className}`, styles.item)}
                onClick={onClick}
                style={{ position: 'relative' }}
                data-tooltip={tooltip}
                data-tooltip-pos={tooltipPos}>

                <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>
        )
    }
}