import React, {useEffect, useState} from 'react'
import PropTypes from 'prop-types'
import {Provider, withContext} from './context'
import securityTypes from 'common-fe/constants/security-types'

import ModalForm from 'react-uikit/modal/form'
import OrderFormComponent from 'containers/forms/order'
import OrderHeaderComponent from 'components/order/header'

const OrderHeader = withContext(OrderHeaderComponent)
const OrderForm = withContext(OrderFormComponent)

const OrderModal = ({
    isShowing,
    orderAction,
    orderActionOptionsItemIndex,
    orderQuantity,
    portfolio,
    security,
    shouldSubscribe,
    showModal,
    subscribeToSecurity,
    unsubscribeToSecurity,
    onDismiss,
}) => {
    const [isCollapsed, setCollapsed] = useState(false)
    const [orderDetails, setOrderDetails] = useState({})

    useEffect(() => {
        const {id: securityId, exchange, securityType} = security

        // We don’t want to subscribe to BONDS since they aren’t
        // very volatile. Also, because we don’t have a socket for it.
        const canSubscribe =
            securityType !== securityTypes.BOND.value && shouldSubscribe

        if (canSubscribe && isShowing) {
            subscribeToSecurity?.({exchange, securityId})
        }
        if (canSubscribe && !isShowing) {
            unsubscribeToSecurity?.({exchange, securityId})
        }

        return () =>
            canSubscribe && unsubscribeToSecurity?.({exchange, securityId})
    }, [security.id, portfolio.id, isShowing])

    const context = {
        isCollapsed,
        setCollapsed,
        security,
        portfolio,
    }

    const title = securityTypes[security.type]
        ? securityTypes[security.type].label
        : 'security'

    return (
        <ModalForm
            isShowing={isShowing}
            title={`Trade ${title}`}
            onDismiss={onDismiss}
        >
            <Provider value={context}>
                <OrderHeader
                    orderDetails={orderDetails}
                    showModal={showModal}
                />

                <OrderForm
                    unregisterOnExit
                    orderAction={orderAction}
                    orderActionOptionsItemIndex={orderActionOptionsItemIndex}
                    orderQuantity={orderQuantity}
                    onQuantityChange={setOrderDetails}
                    onSubmit={onDismiss}
                />
            </Provider>
        </ModalForm>
    )
}

OrderModal.propTypes = {
    isShowing: PropTypes.bool,
    orderAction: PropTypes.string,
    orderActionOptionsItemIndex: PropTypes.number,
    orderQuantity: PropTypes.number,
    portfolio: PropTypes.object,
    security: PropTypes.object,
    // In general, security detail views automatically subscribe to a stream
    // however the same is not true for the discovery tab. In that scenario,
    // we still want get live updates and we can achieve that with the
    // `shouldSubscribe` prop. NOTE: Setting this prop to true will also cause
    // the user to unsubscribe to the stream once the modal has dismissed.
    shouldSubscribe: PropTypes.bool,
    showModal: PropTypes.func,
    subscribeToSecurity: PropTypes.func,
    unsubscribeToSecurity: PropTypes.func,
    onDismiss: PropTypes.func,
}

export default OrderModal