import React from 'react'
import PropTypes from 'prop-types'
import inputNames from 'common-fe/constants/input-names'

import Accordion from 'react-uikit/accordion'
import Button from 'react-uikit/button'
import Form from 'react-uikit/form'
import Icon from 'react-uikit/icon'
import TextArea from 'react-uikit/textarea'
import TextInput from 'react-uikit/input-text'
import SettingsHeader from '../settings-header'
import BasicSettings from '../basic-settings'
import EngagementSettings from '../engagement-settings'
import RankingSettings from '../ranking-settings'
import PortfolioSettings from '../portfolio-settings'

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

const ChallengeCustomization = ({data, goToPreviousStep, isUpdate, user}) => {
    const classNames = bem.classNames('c-course-creation')
    const navigationClassNames = bem.classNames('c-course-creation__navigation')
    const navigationButtonClassNames = bem.classNames(
        'c-course-creation__navigation-button'
    )
    const sectionInputClassNames = bem.classNames(
        'c-course-creation__section-input'
    )
    const accordionHeaderClassNames = bem.classNames(
        'c-course-creation__header-template'
    )
    const accordionClassNames = bem.classNames('c-course-creation__accordion')
    const openedAccordionClassNames = bem.classNames(
        'c-course-creation__accordion--open'
    )
    const openedAccordionContentClassNames = bem.classNames(
        'c-course-creation__accordion-content--open'
    )

    return (
        <div className={classNames} style={{paddingTop: 0}}>
            <Accordion>
                <Accordion.Item
                    className={accordionClassNames}
                    data={data}
                    fields={[
                        inputNames.COURSE_NAME,
                        inputNames.COURSE_CODE,
                        inputNames.COURSE_START_DATE,
                        inputNames.COURSE_END_DATE,
                    ]}
                    headerClassName={accordionHeaderClassNames}
                    headerTemplate={SettingsHeader}
                    title="Basic Settings"
                >
                    <BasicSettings
                        data={data}
                        isUpdate={isUpdate}
                        user={user}
                    />
                </Accordion.Item>

                <Accordion.Item
                    className={accordionClassNames}
                    data={data}
                    fields={[
                        inputNames.COURSE_MESSAGE,
                        inputNames.COURSE_DESCRIPTION,
                    ]}
                    headerClassName={accordionHeaderClassNames}
                    headerTemplate={SettingsHeader}
                    title="Registration Messages"
                >
                    <div>
                        <section
                            className={sectionInputClassNames}
                            style={{marginTop: 0}}
                        >
                            <label
                                htmlFor={inputNames.COURSE_MESSAGE}
                                style={{marginBottom: '0.2rem'}}
                            >
                                Welcome Message
                            </label>
                            <Form.Field
                                maxLength={100}
                                name={inputNames.COURSE_MESSAGE}
                                render={TextInput}
                                required
                                size="small"
                            />
                        </section>

                        <section className={sectionInputClassNames}>
                            <label
                                htmlFor={inputNames.COURSE_DESCRIPTION}
                                style={{marginBottom: '-2.2rem'}}
                            >
                                Challenge Description
                            </label>
                            <Form.Field
                                maxLength={500}
                                name={inputNames.COURSE_DESCRIPTION}
                                render={TextArea}
                                required
                                style={{minHeight: '20rem'}}
                            />
                        </section>
                    </div>
                </Accordion.Item>

                <Accordion.Item
                    className={accordionClassNames}
                    data={data}
                    fields={[
                        inputNames.COURSE_STARTING_VALUE,
                        inputNames.COURSE_BENCHMARK,
                    ]}
                    headerClassName={accordionHeaderClassNames}
                    headerTemplate={SettingsHeader}
                    openClasses={openedAccordionClassNames}
                    openContentClassName={openedAccordionContentClassNames}
                    title="Portfolio Settings"
                >
                    <PortfolioSettings data={data} isUpdate={isUpdate} />
                </Accordion.Item>

                <Accordion.Item
                    className={accordionClassNames}
                    data={data}
                    fields={[]}
                    headerClassName={accordionHeaderClassNames}
                    headerTemplate={SettingsHeader}
                    title="Engagement Criteria"
                >
                    <EngagementSettings data={data} isUpdate={isUpdate} />
                </Accordion.Item>

                <Accordion.Item
                    className={accordionClassNames}
                    data={data}
                    fields={[
                        inputNames.RANKING_WEIGHT_DIVERSIFICATION,
                        inputNames.RANKING_WEIGHT_ENGAGEMENT,
                        inputNames.RANKING_WEIGHT_RETURN,
                        inputNames.RANKING_WEIGHT_SHARPE_RATIO,
                        inputNames.RANKING_WEIGHT_VOLATILITY,
                    ]}
                    headerClassName={accordionHeaderClassNames}
                    headerTemplate={SettingsHeader}
                    title="Ranking Weights"
                >
                    <RankingSettings data={data} isUpdate={isUpdate} />
                </Accordion.Item>
            </Accordion>

            {!isUpdate && (
                <section
                    className={navigationClassNames}
                    style={{justifyContent: 'space-between'}}
                >
                    <Button
                        className={navigationButtonClassNames}
                        onClick={goToPreviousStep}
                    >
                        <Icon
                            name="chevron-down"
                            style={{
                                marginRight: '0.8rem',
                                transform: 'rotate(90deg)',
                            }}
                        />
                        Back
                    </Button>
                </section>
            )}
        </div>
    )
}

ChallengeCustomization.propTypes = {
    data: PropTypes.shape({
        portfolioFundingAmount: PropTypes.shape({
            label: PropTypes.string,
        }),
    }),
    goToPreviousStep: PropTypes.func,
    isUpdate: PropTypes.bool,
    user: PropTypes.shape({
        defaultCoursePrice: PropTypes.number,
    }),
    onChange: PropTypes.func,
}

export default ChallengeCustomization