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

import { TrayItemProps } from '../interfaces'

import { Flex } from './flex'
import { Row } from './row'
import { Icon } from './icon'

const styles = require('../../src/styles/components/tray-item.scss')

export class TrayItem extends Flex<TrayItemProps>  {

    public static defaultProps: TrayItemProps = {
        ...Row.defaultProps,
        fullWidth: false,
        justify: 'center',
    }

    public container: HTMLDivElement

    public setContainerRef = (e: HTMLDivElement) => this.container = e

    public render(): JSX.Element {
        const {
            id,
            style,
            children,
            icon,
            iconSize,
            text,
            onClick,
            tooltip,
            input,
            selected,
        } = this.props;

        return (
            <div
                id={id}
                ref={this.setContainerRef}
                className={this.classNames()}
                style={style}
                onClick={onClick}
                data-tooltip={!text ? tooltip : undefined}
                data-tooltip-pos="right">
                {icon !== undefined
                    ? <Icon icon={icon} size={iconSize || (input ? 14 : 18)} />
                    : null}
                {text !== undefined
                    ? <a data-tooltip={tooltip}>{text}</a>
                    : null}
                {children}
            </div>
        )
    }

    protected classNames(): string {
        return cx(super.classNames(), styles.item, {
            [styles.primary]: this.props.primary,
            [styles.secondary]: this.props.secondary,
            [styles.active]: this.props.active,
            [styles.stroke]: this.props.stroke,
            [styles.onClick]: typeof this.props.onClick === 'function',
            [styles.disabled]: this.props.disabled,
            [styles.input]: this.props.input,
            [styles.dynamic]: this.props.dynamic,
            [styles.selected]: this.props.selected,
            [styles.disabledStroke]: this.props.disabled && this.props.stroke,
        })
    }
}