import * as React from 'react'
import { connect } from 'react-redux'
import * as cx from 'classnames'
import { StylableComponent } from '../../theme'
import { NotificationProps,  NotificationComponentProps } from '../interfaces'
import { hideNotification } from '../actions'
import { getNotifications } from '../selectors'
import { Icon } from '../../icon'
import { Row } from '../../flex'
import { Text } from '../../text'

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

export class _Notification extends StylableComponent<NotificationComponentProps> {

    public componentDidMount() {
        // we're extending a stylable component here so we MUST
        // remember to fire the parent (which sets the theme)
        super.componentDidMount()

        // value of autoclose in milliseconds
        const { autoclose } = this.props.notification
        // autoclose can be set to 0 or -1 if there is no autoclose
        if (autoclose > 0) {
            setTimeout(this.hideNotification, autoclose)
        }
    }

    public render() {
        const { level, message } = this.props.notification

        return (
            <Row
                className={cx(this.props.className, styles.notification)}
                style={this.styles()}
                justify="space-between"
                onClick={this.hideNotification}>
                <Icon icon={level.icon} size={18} />
                <Text color="white">{message}</Text>
                <Icon icon="error" size={18} />
            </Row>
        )
    }

    public styles() {
        return {
            ...this.props.style,
            backgroundColor: this.color(),
        }
    }

    private hideNotification = () =>
        this.props.hideNotification(this.props.notification.id)

    private color = () => {
        switch (this.props.notification.level.key) {
            case 'success':
                return this.success(500)
            case 'warning':
                return this.warning(500)
            case 'error':
                return this.error(500)
            case 'debug':
            case 'info':
            default:
                return this.primary(500)

        }
    }
}

const mapStateToProps = (state: any, ownProps: NotificationProps) => ({})

const mapActionsToProps = {
    hideNotification,
}

export const Notification = connect(mapStateToProps, mapActionsToProps)(_Notification)