import React from 'react'
import PropTypes from 'prop-types'
import {renderWithCurrency} from 'common-fe/utils/render'
import {
    getCurrency,
    getHolding,
    getHoldingsBySecurityType,
} from 'utils/portfolio'

import ChangePill from 'react-uikit/change-pill'
import Icon from 'react-uikit/icon'
import Layout from 'react-uikit/layout'
import HoldingDatum from 'components/order/holding-datum'
import optionTypes from 'common-fe/constants/option-types'

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

const OptionPortfolioInfo = ({
    className,
    exerciseQuantity,
    security: {currency, id: optionId, optionType},
    underlyingSecurity: {
        currentPrice: securityPrice,
        currentPriceDisplay,
        id: underlyingSecurityId,
        type: underlyingSecurityType,
    },
    portfolio: {holdings: securities},
}) => {
    // Get our option's holding
    const option = getHolding({
        holdings: securities.options,
        securityId: optionId,
    })
    const holding = getHolding({
        holdings: getHoldingsBySecurityType(
            {securities},
            underlyingSecurityType
        ),
        securityId: underlyingSecurityId,
    })

    // (1) Total Profit
    const {lotSize, purchaseCost, quantity, strikePrice} = option
    const costPerContract = purchaseCost / quantity

    const profitPerShare =
        optionType === optionTypes.CALL.value
            ? securityPrice - strikePrice
            : strikePrice - securityPrice

    const profitPerContract = profitPerShare * lotSize - costPerContract
    const totalProfit = profitPerContract * exerciseQuantity

    // (2) Cash (available in the security’s currency)
    const currencyPosition = getCurrency({holdings: securities.cash, currency})

    const rootClassNames = bem.classNames('c-option-portfolio-info', className)
    const portfolioInfoHoldingsClasses = bem.classNames(
        'c-option-portfolio-info__holdings'
    )
    const portfolioInfoHrClasses = bem.classNames('c-option-portfolio-info__hr')
    const portfolioInfoCashClasses = bem.classNames(
        'c-option-portfolio-info__cash'
    )
    const portfolioInfoCashHeadingClasses = bem.classNames(
        'c-option-portfolio-info__cash-heading'
    )
    const portfolioInfoCashDatumClasses = bem.classNames(
        'c-option-portfolio-info__cash-datum'
    )

    return (
        <section className={rootClassNames} key="portfolio-info">
            <div className={portfolioInfoHoldingsClasses}>
                <HoldingDatum
                    title="Shares Owned"
                    value={holding ? `${holding.quantity}` : `${0}`}
                />
                <HoldingDatum
                    title="Current Price"
                    value={currentPriceDisplay}
                />
                <HoldingDatum
                    title="Estimated Profit"
                    render={() => (
                        <ChangePill
                            size="medium"
                            value={renderWithCurrency(totalProfit, currency, {
                                largeNumber: true,
                            })}
                            isPositive={
                                totalProfit === 0 ? undefined : totalProfit > 0
                            }
                        />
                    )}
                />
            </div>
            <hr className={portfolioInfoHrClasses} />
            <div className={portfolioInfoCashClasses}>
                <div className={portfolioInfoCashHeadingClasses}>
                    <Layout.Flex align="center">
                        <Icon name="wallet" style={{maxWidth: '2rem'}} />
                        &ensp;
                        <span>Cash</span>
                    </Layout.Flex>
                    <span>{currency}</span>
                </div>
                <div className={portfolioInfoCashDatumClasses}>
                    {currencyPosition}
                </div>
            </div>
        </section>
    )
}

OptionPortfolioInfo.propTypes = {
    className: PropTypes.string,
    exerciseQuantity: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
    portfolio: PropTypes.object,
    security: PropTypes.shape({
        currency: PropTypes.string,
        id: PropTypes.string,
        optionType: PropTypes.string,
        type: PropTypes.string,
    }),
    underlyingSecurity: PropTypes.object,
}

OptionPortfolioInfo.defaultProps = {
    underlyingSecurity: {},
}

export default OptionPortfolioInfo