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 Form from 'react-uikit/form'
import {Grid} from 'react-uikit/layout'
import Slider from 'react-uikit/slider'

const RankingSettings = ({data}) => {
    const sectionHeadingClassNames = bem.classNames(
        'c-course-creation__section-heading'
    )
    const labelClassNames = bem.classNames('c-course-creation__label')

    return (
        <div>
            <section
                className={sectionHeadingClassNames}
                style={{marginTop: 0}}
            >
                <p style={{marginTop: 0}}>
                    Specify the results that are important to rank the
                    participants by.{' '}
                    <span>The sum of the weights must equal 100%.</span>
                </p>
            </section>

            <Grid
                className={sectionHeadingClassNames}
                gap="1.6rem"
                align="center"
                templateColumns="2fr 3fr 1fr"
            >
                <label
                    className={labelClassNames}
                    htmlFor={inputNames.RANKING_WEIGHT_DIVERSIFICATION}
                >
                    Diversification
                </label>
                <Form.Field
                    initialValue={0}
                    max={100}
                    min={0}
                    name={inputNames.RANKING_WEIGHT_DIVERSIFICATION}
                    precision={0}
                    render={Slider}
                    step={1}
                />
                <span style={{justifySelf: 'end'}}>
                    {data[inputNames.RANKING_WEIGHT_DIVERSIFICATION]}%
                </span>

                <label
                    className={labelClassNames}
                    htmlFor={inputNames.RANKING_WEIGHT_ENGAGEMENT}
                >
                    Engagement Score
                </label>
                <Form.Field
                    initialValue={0}
                    max={100}
                    min={0}
                    name={inputNames.RANKING_WEIGHT_ENGAGEMENT}
                    precision={0}
                    render={Slider}
                    step={1}
                />
                <span style={{justifySelf: 'end'}}>
                    {data[inputNames.RANKING_WEIGHT_ENGAGEMENT]}%
                </span>

                <label
                    className={labelClassNames}
                    htmlFor={inputNames.RANKING_WEIGHT_RETURN}
                >
                    Return
                </label>
                <Form.Field
                    initialValue={0}
                    max={100}
                    min={0}
                    name={inputNames.RANKING_WEIGHT_RETURN}
                    precision={0}
                    render={Slider}
                    step={1}
                />
                <span style={{justifySelf: 'end'}}>
                    {data[inputNames.RANKING_WEIGHT_RETURN]}%
                </span>

                <label
                    className={labelClassNames}
                    htmlFor={inputNames.RANKING_WEIGHT_SHARPE_RATIO}
                >
                    Sharpe Ratio
                </label>
                <Form.Field
                    initialValue={0}
                    max={100}
                    min={0}
                    name={inputNames.RANKING_WEIGHT_SHARPE_RATIO}
                    precision={0}
                    render={Slider}
                    step={1}
                />
                <span style={{justifySelf: 'end'}}>
                    {data[inputNames.RANKING_WEIGHT_SHARPE_RATIO]}%
                </span>

                <label
                    className={labelClassNames}
                    htmlFor={inputNames.RANKING_WEIGHT_VOLATILITY}
                >
                    Volatility
                </label>
                <Form.Field
                    initialValue={0}
                    max={100}
                    min={0}
                    name={inputNames.RANKING_WEIGHT_VOLATILITY}
                    precision={0}
                    render={Slider}
                    step={1}
                />
                <span style={{justifySelf: 'end'}}>
                    {data[inputNames.RANKING_WEIGHT_VOLATILITY]}%
                </span>
            </Grid>
        </div>
    )
}

RankingSettings.propTypes = {
    data: PropTypes.object,
    onChange: PropTypes.func,
}

export default RankingSettings