import React from 'react'
import PropTypes from 'prop-types'
import inputNames from 'common-fe/constants/input-names'
import orderActions from 'common-fe/constants/order-actions'
import orderTypes from 'common-fe/constants/order-types'
import Form from 'react-uikit/form'
import TextInput from 'react-uikit/input-text'
import Tag from 'react-uikit/tag'

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

const OrderAlgorithmFilled = ({orderAction, orderType}) => {
    const algorithm = `${orderAction}_${orderType}`

    const elementClassNames = bem.classNames('c-order-algorithm__element')
    const formulaClassNames = bem.classNames('c-order-algorithm__formula')
    const inputClassNames = bem.classNames('c-order-algorithm__input')
    const inputWrapperClassNames = bem.classNames(
        'c-order-algorithm__input-wrapper'
    )
    const labelClassNames = bem.classNames('c-order-algorithm__label')
    const fullWidthClassNames = bem.classNames('c-order-algorithm__element', {
        isFullWidth: true,
    })

    switch (algorithm) {
        // BUY & COVER LIMIT
        case `${orderActions.BUY.value}_${orderTypes.LIMIT.value}`:
        case `${orderActions.COVER.value}_${orderTypes.LIMIT.value}`: {
            return (
                <React.Fragment>
                    <p>Order filled if:</p>
                    <section className={formulaClassNames}>
                        <Tag
                            variant="neutral"
                            isFilled
                            className={elementClassNames}
                        >
                            Market Price
                        </Tag>{' '}
                        <Tag isFilled className={elementClassNames}>
                            ≤
                        </Tag>{' '}
                        <Form.Field
                            className={inputClassNames}
                            dark
                            inputWrapperClassName={inputWrapperClassNames}
                            label="Limit Price"
                            labelClassName={labelClassNames}
                            min={0}
                            name={inputNames.LIMIT_PRICE}
                            placeholder="0.00"
                            render={TextInput.Alternate}
                            size="small"
                            type="number"
                        />
                    </section>
                </React.Fragment>
            )
        }

        // SELL & SHORT LIMIT
        case `${orderActions.SELL.value}_${orderTypes.LIMIT.value}`:
        case `${orderActions.SHORT.value}_${orderTypes.LIMIT.value}`: {
            return (
                <React.Fragment>
                    <p>Order filled if:</p>
                    <section className={formulaClassNames}>
                        <Tag
                            variant="neutral"
                            isFilled
                            className={elementClassNames}
                        >
                            Market Price
                        </Tag>{' '}
                        <Tag isFilled className={elementClassNames}>
                            ≥
                        </Tag>{' '}
                        <Form.Field
                            className={inputClassNames}
                            dark
                            inputWrapperClassName={inputWrapperClassNames}
                            label="Limit Price"
                            labelClassName={labelClassNames}
                            min={0}
                            name={inputNames.LIMIT_PRICE}
                            placeholder="0.00"
                            render={TextInput.Alternate}
                            size="small"
                            type="number"
                        />
                    </section>
                </React.Fragment>
            )
        }
        // BUY & COVER STOP
        // SELL & SHORT STOP
        case `${orderActions.BUY.value}_${orderTypes.STOP.value}`:
        case `${orderActions.COVER.value}_${orderTypes.STOP.value}`:
        case `${orderActions.SELL.value}_${orderTypes.STOP.value}`:
        case `${orderActions.SHORT.value}_${orderTypes.STOP.value}`: {
            return (
                <React.Fragment>
                    <p>Order filled if:</p>
                    <section className={formulaClassNames}>
                        <Tag
                            variant="neutral"
                            isFilled
                            className={elementClassNames}
                        >
                            Triggered
                        </Tag>
                        <Tag isFilled className={elementClassNames}>
                            AND
                        </Tag>
                        <Tag
                            variant="neutral"
                            isFilled
                            className={fullWidthClassNames}
                        >
                            At the next available price
                        </Tag>
                    </section>
                </React.Fragment>
            )
        }

        // BUY & COVER STOP LIMIT
        // Market Price ≤ Limit Price
        case `${orderActions.BUY.value}_${orderTypes.STOP_LIMIT.value}`:
        case `${orderActions.COVER.value}_${orderTypes.STOP_LIMIT.value}`: {
            return (
                <React.Fragment>
                    <p>Order filled if:</p>
                    <section className={formulaClassNames}>
                        <Tag
                            variant="neutral"
                            isFilled
                            className={elementClassNames}
                        >
                            Market Price
                        </Tag>{' '}
                        <Tag isFilled className={elementClassNames}>
                            ≤
                        </Tag>{' '}
                        <Form.Field
                            className={inputClassNames}
                            dark
                            inputWrapperClassName={inputWrapperClassNames}
                            label="Limit Price"
                            labelClassName={labelClassNames}
                            min={0}
                            name={inputNames.LIMIT_PRICE}
                            placeholder="0.00"
                            render={TextInput.Alternate}
                            size="small"
                            type="number"
                        />
                    </section>
                </React.Fragment>
            )
        }
        // SELL & SHORT STOP LIMIT
        // Market Price ≥ Limit Price
        case `${orderActions.SELL.value}_${orderTypes.STOP_LIMIT.value}`:
        case `${orderActions.SHORT.value}_${orderTypes.STOP_LIMIT.value}`: {
            return (
                <React.Fragment>
                    <p>Order filled if:</p>
                    <section className={formulaClassNames}>
                        <Tag
                            variant="neutral"
                            isFilled
                            className={elementClassNames}
                        >
                            Market Price
                        </Tag>{' '}
                        <Tag isFilled className={elementClassNames}>
                            ≥
                        </Tag>{' '}
                        <Form.Field
                            className={inputClassNames}
                            dark
                            inputWrapperClassName={inputWrapperClassNames}
                            label="Limit Price"
                            labelClassName={labelClassNames}
                            min={0}
                            name={inputNames.LIMIT_PRICE}
                            placeholder="0.00"
                            render={TextInput.Alternate}
                            size="small"
                            type="number"
                        />
                    </section>
                </React.Fragment>
            )
        }
        default: {
            return algorithm
        }
    }
}

OrderAlgorithmFilled.propTypes = {
    orderAction: PropTypes.oneOf(Object.keys(orderActions)),
    orderType: PropTypes.oneOf(Object.keys(orderTypes)),
}

export default OrderAlgorithmFilled