import React from 'react'
import PropTypes from 'prop-types'
import inputNames from 'common-fe/constants/input-names'
import BEMModule from 'utils/bem'
import {benchmarkOptions, fundingOptions} from '../../helpers'
import styles from '../../styles.scss'
const bem = new BEMModule(styles)

import Form from 'react-uikit/form'
import {Flex, Grid} from 'react-uikit/layout'
import SelectInput from 'react-uikit/select-input'
import {EnableEngagementSwitch} from '../engagement-settings'

const PortfolioSettings = ({data, isUpdate}) => {
    const engagementClassNames = bem.classNames('c-course-creation__engagement')
    const engagementInputLabelClassNames = bem.classNames(
        'c-course-creation__engagement-input-label'
    )
    const startingValueInputClassNames = bem.classNames(
        'c-course-creation__starting-value'
    )
    const valueClassNames = bem.classNames('c-course-creation__value')

    return (
        <Grid
            className={engagementClassNames}
            gap="1.6rem"
            templateColumns="1fr 1fr"
            style={{marginBottom: '1.6rem'}}
        >
            <Flex align="center" justify="space-between">
                <label
                    className={engagementInputLabelClassNames}
                    htmlFor={inputNames.COURSE_STARTING_VALUE}
                >
                    Starting Value
                </label>
                <span style={{display: 'block', fontWeight: 600}}>USD</span>
            </Flex>

            {isUpdate ? (
                <span className={valueClassNames} style={{paddingLeft: 0}}>
                    $ {data?.[inputNames.COURSE_STARTING_VALUE]?.label}
                </span>
            ) : (
                <Form.Field
                    className={startingValueInputClassNames}
                    name={inputNames.COURSE_STARTING_VALUE}
                    options={fundingOptions}
                    render={SelectInput}
                    required
                    size="small"
                />
            )}

            <label
                className={engagementInputLabelClassNames}
                htmlFor={inputNames.COURSE_BENCHMARK}
            >
                Benchmark
            </label>

            <Form.Field
                className={startingValueInputClassNames}
                name={inputNames.COURSE_BENCHMARK}
                options={benchmarkOptions}
                render={SelectInput}
                required
                size="small"
            />

            <label
                className={engagementInputLabelClassNames}
                htmlFor={inputNames.RESTRICT_DAY_TRADING}
            >
                Restrict Day Trading
            </label>

            <div
                style={{
                    display: 'flex',
                    verticalAlign: '-20%',
                    minHeight: '4rem',
                    alignItems: 'center',
                }}
            >
                <Form.Field
                    name={inputNames.RESTRICT_DAY_TRADING}
                    render={EnableEngagementSwitch}
                />
            </div>

            <label
                className={engagementInputLabelClassNames}
                htmlFor={inputNames.IS_TEAM_PORTFOLIOS}
            >
                Team Portfolios
            </label>

            {isUpdate ? (
                <p>
                    {data?.[inputNames.IS_TEAM_PORTFOLIOS]
                        ? 'Enabled'
                        : 'Disabled'}
                </p>
            ) : (
                <div
                    style={{
                        display: 'flex',
                        verticalAlign: '-20%',
                        minHeight: '4rem',
                        alignItems: 'center',
                    }}
                >
                    <Form.Field
                        name={inputNames.IS_TEAM_PORTFOLIOS}
                        render={EnableEngagementSwitch}
                    />
                </div>
            )}
        </Grid>
    )
}

PortfolioSettings.propTypes = {
    data: PropTypes.object,
    isUpdate: PropTypes.bool,
}

export default PortfolioSettings