import React from 'react'
import PropTypes from 'prop-types'
import moment from 'moment'
import {renderWithCurrency} from 'common-fe/utils/render'

import Modal from 'react-uikit/modal'
import Tag from 'react-uikit/tag'

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

const OrderRationaleLogModal = ({
    canDismiss,
    isShowing,
    modal: {
        action,
        currency,
        price,
        security,
        status,
        strategy,
        summary,
        timestamp,
        type,
    },
    onDismiss,
}) => {
    const purchasePrice = price && Number(price)
    const purchasePriceDisplay =
        typeof purchasePrice === 'number'
            ? renderWithCurrency(purchasePrice, currency, {largeNumber: true})
            : '– –'

    const rootClassNames = bem.classNames('c-order-rationale-log')
    const headerClassNames = bem.classNames('c-order-rationale-log__header')
    const securityClassNames = bem.classNames('c-order-rationale-log__security')
    const timestampClassNames = bem.classNames(
        'c-order-rationale-log__timestamp'
    )
    const infoClassNames = bem.classNames('c-order-rationale-log__info')
    const hrClassNames = bem.classNames('c-order-rationale-log__hr')
    const rationaleClassNames = bem.classNames(
        'c-order-rationale-log__rationale'
    )
    const strategyClassNames = bem.classNames('c-order-rationale-log__strategy')
    const labelClassNames = bem.classNames('c-order-rationale-log__label')
    const statusClassNames = bem.classNames('c-order-rationale-log__status')
    return (
        <Modal
            isShowing={isShowing}
            tapOutsideToDismiss={canDismiss}
            size="large"
            onDismiss={onDismiss}
        >
            <Modal.HeaderBar title="Rationale" />

            <div className={rootClassNames}>
                <section className={headerClassNames}>
                    <h2 className={securityClassNames}>{security}</h2>
                    <p className={timestampClassNames}>
                        {moment(timestamp).format('MMMM Do, YYYY')}
                        <br />
                        {moment(timestamp).format('h:mm A')}
                    </p>
                </section>
                <dl className={infoClassNames}>
                    <section>
                        <dt>Order Action</dt>
                        <dd>{action}</dd>
                    </section>
                    <section>
                        <dt>Order Type</dt>
                        <dd>{type}</dd>
                    </section>
                    <section>
                        <dt>Purchase Price</dt>
                        <dd>{purchasePriceDisplay}</dd>
                    </section>
                </dl>
                <hr className={hrClassNames} />
                <dl className={infoClassNames}>
                    <section>
                        <dt>Status</dt>
                    </section>
                    <section>
                        <dd className={statusClassNames}>{status}</dd>
                    </section>
                </dl>
                <section className={strategyClassNames}>
                    <div>
                        <h3 className={labelClassNames}>Strategy</h3>
                        <p>
                            <Tag isFilled variant="neutral">
                                {strategy}
                            </Tag>
                        </p>
                    </div>
                </section>
                <section className={rationaleClassNames}>
                    <h3 className={labelClassNames}>Rationale</h3>
                    <p>{summary}</p>
                </section>
            </div>
        </Modal>
    )
}

OrderRationaleLogModal.propTypes = {
    canDismiss: PropTypes.bool,
    isShowing: PropTypes.bool,
    modal: PropTypes.shape({
        action: PropTypes.string,
        currency: PropTypes.string,
        price: PropTypes.string,
        security: PropTypes.string,
        status: PropTypes.string,
        strategy: PropTypes.string,
        summary: PropTypes.string,
        timestamp: PropTypes.string,
        type: PropTypes.string,
    }),
    onDismiss: PropTypes.func,
}

OrderRationaleLogModal.defaultProps = {
    canDismiss: true,
    showDismissButton: true,
}

export default OrderRationaleLogModal