import React from 'react'
import PropTypes from 'prop-types'
import moment from 'moment'
import orderStatuses from 'common-fe/constants/order-statuses'

import Icon from 'react-uikit/icon'

import styles from './styles.scss'
import BEMModule from 'utils/bem'
const bem = new BEMModule(styles)

const DefaultTemplate = () => <span>&nbsp;</span>
const WarnTemplate = () => <span>!</span>
const ErrorTemplate = () => {
    const iconClassNames = bem.classNames('c-column-timestamp__icon')
    return <Icon name="close" className={iconClassNames} />
}
const SuccessTemplate = () => {
    const iconClassNames = bem.classNames('c-column-timestamp__icon')
    return <Icon name="check" className={iconClassNames} />
}

const getStatusTemplate = (status) => {
    switch (status) {
        case orderStatuses.EXPIRED.value: {
            return WarnTemplate
        }
        case orderStatuses.ABORTED.value:
        case orderStatuses.CANCELLED.value: {
            return ErrorTemplate
        }
        case orderStatuses.PROCESSED.value: {
            return SuccessTemplate
        }
        default: {
            return DefaultTemplate
        }
    }
}

const ColumnTimestamp = ({align, status, timestamp, className}) => {
    const rootClassNames = bem.classNames(
        'c-column-timestamp',
        {[align]: true},
        className
    )
    const statusClassNames = bem.classNames('c-column-timestamp__status', {
        [status]: true,
    })
    const timeClassNames = bem.classNames('c-column-timestamp__time')
    const statusTitle = orderStatuses[status]
        ? orderStatuses[status].label
        : status

    const Status = getStatusTemplate(status)
    return (
        <td className={rootClassNames}>
            <div className={statusClassNames} title={statusTitle}>
                <Status />
            </div>
            <div className={timeClassNames}>
                {moment(timestamp).format('DD MMMM, YYYY')}
                <br />
                {moment(timestamp).format('h:mm A')}
            </div>
        </td>
    )
}

ColumnTimestamp.propTypes = {
    align: PropTypes.oneOf(['left', 'center', 'right']),
    className: PropTypes.string,
    status: PropTypes.string,
    timestamp: PropTypes.string,
}

ColumnTimestamp.defaultProps = {
    align: 'left',
}

export default React.memo(ColumnTimestamp)