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

import Checkbox from 'react-uikit/checkbox'
import Form from 'react-uikit/form'
import Layout from 'react-uikit/layout'
import Switch from 'react-uikit/switch'
import TextInput from 'react-uikit/input-text'
import Toggle from 'react-uikit/switch/templates/toggle'

export const EnableEngagementSwitch = ({value, onChange, onUpdate}) => (
    <Switch
        on={value}
        render={Toggle}
        onChange={onChange}
        onUpdate={onUpdate}
    />
)

EnableEngagementSwitch.propTypes = {
    value: PropTypes.bool,
    onChange: PropTypes.func,
    onUpdate: PropTypes.func,
}

const EngagementSettings = ({data}) => {
    const classNames = bem.classNames('c-course-creation')
    const sectionHeadingClassNames = bem.classNames(
        'c-course-creation__section-heading'
    )
    const checkboxClassNames = bem.classNames('c-course-creation__checkbox')
    const engagementClassNames = bem.classNames('c-course-creation__engagement')
    const engagementInputClassNames = bem.classNames(
        'c-course-creation__engagement-input'
    )
    const engagementInputLabelClassNames = bem.classNames(
        'c-course-creation__engagement-input-label'
    )
    const totalValueClassNames = bem.classNames(
        'c-course-creation__total-value'
    )

    return (
        <div className={classNames}>
            <section
                className={sectionHeadingClassNames}
                style={{marginTop: 0}}
            >
                <p style={{marginTop: 0}}>
                    Set the minimum number of interactions you expect
                    participants to complete in the challenge. The engagement
                    score can be translated into a grade.
                </p>

                <Layout.Flex justify="space-between">
                    <div />
                    <div>
                        <span style={{fontWeight: 600, marginRight: '1.6rem'}}>
                            Enable
                        </span>
                        <div
                            style={{
                                display: 'inline-block',
                                verticalAlign: '-20%',
                            }}
                        >
                            <Form.Field
                                name={inputNames.COURSE_ENGAGEMENT_IS_TRACKING}
                                render={EnableEngagementSwitch}
                            />
                        </div>
                    </div>
                </Layout.Flex>
            </section>

            <Layout.Grid
                className={engagementClassNames}
                gap="1.6rem"
                templateColumns="4fr 1fr 1fr"
            >
                <label
                    className={engagementInputLabelClassNames}
                    htmlFor={inputNames.COURSE_ENGAGEMENT_TOTAL_TRADES}
                >
                    Total Trades Executed
                </label>

                <span className={totalValueClassNames}>
                    {data[inputNames.COURSE_ENGAGEMENT_IS_TRACKING]
                        ? data[inputNames.COURSE_ENGAGEMENT_TOTAL_TRADES]
                        : '0'}
                </span>

                <div />

                <label
                    className={engagementInputLabelClassNames}
                    htmlFor={inputNames.COURSE_ENGAGEMENT_TOTAL_TRADES_EQUITIES}
                >
                    Equity Trades Executed
                </label>

                <Form.Field
                    className={engagementInputClassNames}
                    disabled={
                        !data[inputNames.COURSE_ENGAGEMENT_IS_TRACKING] ||
                        !data[inputNames.COURSE_ENGAGEMENT_IS_TRADES_EQUITIES]
                    }
                    min={1}
                    max={9999}
                    name={inputNames.COURSE_ENGAGEMENT_TOTAL_TRADES_EQUITIES}
                    placeholder="50"
                    render={TextInput}
                    size="small"
                    textAlign="center"
                    type="number"
                />

                <Form.Field
                    className={checkboxClassNames}
                    checked={
                        data[inputNames.COURSE_ENGAGEMENT_IS_TRACKING] &&
                        data[inputNames.COURSE_ENGAGEMENT_IS_TRADES_EQUITIES]
                    }
                    disabled={!data[inputNames.COURSE_ENGAGEMENT_IS_TRACKING]}
                    name={inputNames.COURSE_ENGAGEMENT_IS_TRADES_EQUITIES}
                    render={Checkbox}
                />

                <label
                    className={engagementInputLabelClassNames}
                    htmlFor={inputNames.COURSE_ENGAGEMENT_TOTAL_TRADES_BONDS}
                >
                    Bond Trades Executed
                </label>

                <Form.Field
                    className={engagementInputClassNames}
                    disabled={
                        !data[inputNames.COURSE_ENGAGEMENT_IS_TRACKING] ||
                        !data[inputNames.COURSE_ENGAGEMENT_IS_TRADES_BONDS]
                    }
                    min={1}
                    max={9999}
                    name={inputNames.COURSE_ENGAGEMENT_TOTAL_TRADES_BONDS}
                    placeholder="--"
                    render={TextInput}
                    size="small"
                    textAlign="center"
                    type="number"
                />

                <Form.Field
                    className={checkboxClassNames}
                    checked={
                        data[inputNames.COURSE_ENGAGEMENT_IS_TRACKING] &&
                        data[inputNames.COURSE_ENGAGEMENT_IS_TRADES_BONDS]
                    }
                    disabled={!data[inputNames.COURSE_ENGAGEMENT_IS_TRACKING]}
                    name={inputNames.COURSE_ENGAGEMENT_IS_TRADES_BONDS}
                    render={Checkbox}
                />

                <label
                    className={engagementInputLabelClassNames}
                    htmlFor={inputNames.COURSE_ENGAGEMENT_TOTAL_TRADES_OPTIONS}
                >
                    Options Trades Executed
                </label>

                <Form.Field
                    className={engagementInputClassNames}
                    disabled={
                        !data[inputNames.COURSE_ENGAGEMENT_IS_TRACKING] ||
                        !data[inputNames.COURSE_ENGAGEMENT_IS_TRADES_OPTIONS]
                    }
                    min={1}
                    max={9999}
                    name={inputNames.COURSE_ENGAGEMENT_TOTAL_TRADES_OPTIONS}
                    placeholder="--"
                    render={TextInput}
                    size="small"
                    textAlign="center"
                    type="number"
                />

                <Form.Field
                    className={checkboxClassNames}
                    checked={
                        data[inputNames.COURSE_ENGAGEMENT_IS_TRACKING] &&
                        data[inputNames.COURSE_ENGAGEMENT_IS_TRADES_OPTIONS]
                    }
                    disabled={!data[inputNames.COURSE_ENGAGEMENT_IS_TRACKING]}
                    name={inputNames.COURSE_ENGAGEMENT_IS_TRADES_OPTIONS}
                    render={Checkbox}
                />

                <label
                    className={engagementInputLabelClassNames}
                    htmlFor={inputNames.COURSE_ENGAGEMENT_TOTAL_TRADES_SHORTS}
                >
                    Short Trades Executed
                </label>

                <Form.Field
                    className={engagementInputClassNames}
                    disabled={
                        !data[inputNames.COURSE_ENGAGEMENT_IS_TRACKING] ||
                        !data[inputNames.COURSE_ENGAGEMENT_IS_TRADES_SHORTS]
                    }
                    min={1}
                    max={9999}
                    name={inputNames.COURSE_ENGAGEMENT_TOTAL_TRADES_SHORTS}
                    placeholder="--"
                    render={TextInput}
                    size="small"
                    textAlign="center"
                    type="number"
                />

                <Form.Field
                    className={checkboxClassNames}
                    checked={
                        data[inputNames.COURSE_ENGAGEMENT_IS_TRACKING] &&
                        data[inputNames.COURSE_ENGAGEMENT_IS_TRADES_SHORTS]
                    }
                    disabled={!data[inputNames.COURSE_ENGAGEMENT_IS_TRACKING]}
                    name={inputNames.COURSE_ENGAGEMENT_IS_TRADES_SHORTS}
                    render={Checkbox}
                />

                <label
                    className={engagementInputLabelClassNames}
                    htmlFor={inputNames.COURSE_ENGAGEMENT_TOTAL_HOLDINGS}
                >
                    Securities Held
                </label>

                <Form.Field
                    className={engagementInputClassNames}
                    disabled={
                        !data[inputNames.COURSE_ENGAGEMENT_IS_TRACKING] ||
                        !data[inputNames.COURSE_ENGAGEMENT_IS_HOLDINGS]
                    }
                    min={1}
                    max={9999}
                    name={inputNames.COURSE_ENGAGEMENT_TOTAL_HOLDINGS}
                    placeholder="50"
                    render={TextInput}
                    size="small"
                    textAlign="center"
                    type="number"
                />

                <Form.Field
                    className={checkboxClassNames}
                    checked={
                        data[inputNames.COURSE_ENGAGEMENT_IS_TRACKING] &&
                        data[inputNames.COURSE_ENGAGEMENT_IS_HOLDINGS]
                    }
                    disabled={!data[inputNames.COURSE_ENGAGEMENT_IS_TRACKING]}
                    name={inputNames.COURSE_ENGAGEMENT_IS_HOLDINGS}
                    render={Checkbox}
                />

                <label
                    className={engagementInputLabelClassNames}
                    htmlFor={inputNames.COURSE_ENGAGEMENT_MAX_CASH_PERCENTAGE}
                >
                    Max % of Portfolio as Cash
                </label>

                <Form.Field
                    className={engagementInputClassNames}
                    disabled={
                        !data[inputNames.COURSE_ENGAGEMENT_IS_TRACKING] ||
                        !data[
                            inputNames.COURSE_ENGAGEMENT_IS_MAX_CASH_PERCENTAGE
                        ]
                    }
                    min={1}
                    max={99}
                    name={inputNames.COURSE_ENGAGEMENT_MAX_CASH_PERCENTAGE}
                    placeholder="10"
                    render={TextInput}
                    size="small"
                    textAlign="center"
                    type="number"
                />

                <Form.Field
                    className={checkboxClassNames}
                    checked={
                        data[inputNames.COURSE_ENGAGEMENT_IS_TRACKING] &&
                        data[
                            inputNames.COURSE_ENGAGEMENT_IS_MAX_CASH_PERCENTAGE
                        ]
                    }
                    disabled={!data[inputNames.COURSE_ENGAGEMENT_IS_TRACKING]}
                    name={inputNames.COURSE_ENGAGEMENT_IS_MAX_CASH_PERCENTAGE}
                    render={Checkbox}
                />

                <label
                    className={engagementInputLabelClassNames}
                    htmlFor={inputNames.COURSE_ENGAGEMENT_TOTAL_RATIONALES}
                >
                    Rationales Submitted
                </label>

                <Form.Field
                    className={engagementInputClassNames}
                    disabled={
                        !data[inputNames.COURSE_ENGAGEMENT_IS_TRACKING] ||
                        !data[inputNames.COURSE_ENGAGEMENT_IS_RATIONALES]
                    }
                    min={1}
                    max={9999}
                    name={inputNames.COURSE_ENGAGEMENT_TOTAL_RATIONALES}
                    placeholder="50"
                    render={TextInput}
                    size="small"
                    textAlign="center"
                    type="number"
                />

                <Form.Field
                    className={checkboxClassNames}
                    checked={
                        data[inputNames.COURSE_ENGAGEMENT_IS_TRACKING] &&
                        data[inputNames.COURSE_ENGAGEMENT_IS_RATIONALES]
                    }
                    disabled={!data[inputNames.COURSE_ENGAGEMENT_IS_TRACKING]}
                    name={inputNames.COURSE_ENGAGEMENT_IS_RATIONALES}
                    render={Checkbox}
                />
            </Layout.Grid>
        </div>
    )
}

EngagementSettings.defaultProps = {
    isUpdate: false,
}

EngagementSettings.propTypes = {
    data: PropTypes.object,
    goToPreviousStep: PropTypes.func,
    isUpdate: PropTypes.bool,
}

export default EngagementSettings