import React from 'react'
import PropTypes from 'prop-types'
import SelectInput from 'react-uikit/select-input'

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

import {renderWithCurrency} from 'common-fe/utils/render'
import Form from 'react-toolkit/form'

const StartingValue = ({disabled, name, value, options}) => {
    const sectionClassNames = bem.classNames('c-starting-value')
    const labelClassNames = bem.classNames('c-starting-value__label')
    // TODO: Figure out where the curency will come from
    const defaultCurrency = 'USD'

    // Professor has set a starting value for the class portfolio
    const setValue = (
        <section className={sectionClassNames}>
            <div className={labelClassNames}>
                <span>Starting Value</span>
            </div>
            <div>
                <p>
                    <span>{defaultCurrency}</span>&ensp;
                    {renderWithCurrency(value, defaultCurrency, {
                        largeNumber: true,
                        decimal: 0,
                    })}
                </p>
            </div>
        </section>
    )

    // Professor has left the starting value up to students
    const openValue = (
        <section className={sectionClassNames}>
            <div className={labelClassNames}>
                <span>Starting Value</span>
                <span>USD</span>
            </div>
            <div>
                <Form.Field
                    component={SelectInput}
                    name={name}
                    options={options}
                    required
                    size="small"
                    disabled={disabled}
                />
            </div>
        </section>
    )

    if (value) {
        return setValue
    }
    return openValue
}

StartingValue.propTypes = {
    disabled: PropTypes.bool,
    name: PropTypes.string,
    options: PropTypes.array,
    value: PropTypes.number,
}

StartingValue.defaultProps = {}

export default StartingValue
