import * as React from 'react'
import { HoverableComponent } from '../common'
import { StylableComponent } from '../theme'
import { ListProps, ListItemProps } from './interfaces'
import * as cx from 'classnames'

const styles = require('../../../src/components/list/styles.scss')

export class List extends StylableComponent<ListProps> {
    public render() {
        return (
            <ul
                className={this.classNames()}
                style={this.styles()}>
                {this.props.children}
            </ul>
        )
    }

    protected classNames(): string {
        return cx(styles.container, this.props.className)
    }
}

/* tslint:disable */
export class ListItem extends HoverableComponent<ListItemProps> {

    public render() {
        return (
            <li
                style={this.styles()}
                className={this.classNames()}
                onMouseEnter={this.onMouseEnter}
                onMouseLeave={this.onMouseLeave}
                onClick={this.props.onClick}>
                {this.props.children}
            </li>
        )
    }

    public styles() {
        const { primary, active } = this.props
        const { hover } = this.state
        const style: any = this.props.style || {}

        if (primary) {
            if (active && hover) {
                style.backgroundColor = this.gray(200)
                style.color = this.gray(900)
            } else if (hover) {
                style.backgroundColor = this.primary(400)
                style.color = 'white'
            } else if (active) {
                style.backgroundColor = this.gray(100)
                style.color = this.gray(900)
            } else {
                style.backgroundColor = this.primary(500)
                style.color = 'white'
            }
        } else {
            if (active && hover) {
                style.backgroundColor = this.primary(400)
                style.color = 'white'
            } else if (hover) {
                style.backgroundColor = this.gray(200)
                style.color = this.gray(700)
            } else if (active) {
                style.backgroundColor = this.primary(500)
                style.color = 'white'
            } else {
                style.backgroundColor = this.gray(100)
                style.color = this.gray(900)
            }
        }
        return style
    }

    protected classNames(): string {
        return cx(styles.item, this.props.className)
    }
}

/* tslint:enable */