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

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 SelectInput from 'react-uikit/select-input'
import SettingsHeader from '../settings-header'
import BasicSettings from '../basic-settings'

// const dateFormat = 'MMMM D, YYYY'

const CourseSettings = ({
    data,
    goToNextStep,
    isEndDateUpdateable,
    isStartDateUpdateable,
    isUpdate,
    user,
}) => {
    const accordionRef = useRef(null)
    const accordionItemRef = useRef(null)
    const challengeOptions = useMemo(
        () =>
            content.challengeTypes.map(({label}, index) => ({
                value: index,
                label,
            })),
        []
    )

    // const descriptionContent = typeof data[inputNames.COURSE_CHALLENGE_TYPE]?.value === 'number' ? (
    //     content.challengeTypes[(data[inputNames.COURSE_CHALLENGE_TYPE]?.value)].description
    // ) : (
    //     content.challengeDefaultDescription
    // )
    /* <section className={sectionHeadingClassNames}>
                            <h3>Description</h3>
                            <p style={{minHeight: '8rem'}}>{descriptionContent}</p>
                        </section> */
    const handleChallengeTypeChange = () => {
        const {onOpen} = accordionRef.current
        const {getIndex: index} = accordionItemRef.current

        onOpen(index)
    }

    const classNames = bem.classNames('c-course-creation')
    const sectionHeadingClassNames = bem.classNames(
        'c-course-creation__section-heading'
    )
    const sectionInputSideLabelClassNames = bem.classNames(
        'c-course-creation__section-input',
        {'side-label': true}
    )
    const navigationClassNames = bem.classNames('c-course-creation__navigation')
    const navigationButtonClassNames = bem.classNames(
        'c-course-creation__navigation-button'
    )
    const nextIconClassNames = bem.classNames('c-course-creation__next-icon')
    const accordionHeaderClassNames = bem.classNames(
        'c-course-creation__header-template'
    )
    const accordionClassNames = bem.classNames('c-course-creation__accordion')

    return (
        <div className={classNames}>
            <section
                className={accordionClassNames}
                style={{paddingBottom: '1.6rem'}}
            >
                <div style={{paddingBottom: 0}}>
                    <section className={sectionHeadingClassNames}>
                        <h2>Challenge Settings</h2>
                        <p>
                            {content.challengeSettingsDescription}{' '}
                            <a
                                href={content.challengeComparisonURL}
                                target="_blank"
                                rel="noopener noreferrer"
                            >
                                here
                            </a>
                            .
                        </p>
                    </section>

                    <section
                        className={sectionInputSideLabelClassNames}
                        style={{marginTop: '1.6rem'}}
                    >
                        <label>Challenge Type</label>
                        <Form.Field
                            name={inputNames.COURSE_CHALLENGE_TYPE}
                            onChange={handleChallengeTypeChange}
                            options={challengeOptions}
                            render={SelectInput}
                            size="small"
                        />
                    </section>

                    <section className={sectionHeadingClassNames}>
                        <p style={{marginBottom: 0}}>
                            {content.challengeCustomizationDescription}
                        </p>
                    </section>
                </div>
            </section>

            <Accordion ref={accordionRef}>
                <Accordion.Item
                    className={accordionClassNames}
                    data={data}
                    fields={[
                        inputNames.COURSE_START_DATE,
                        inputNames.COURSE_END_DATE,
                        inputNames.COURSE_NAME,
                        inputNames.COURSE_CODE,
                    ]}
                    headerClassName={accordionHeaderClassNames}
                    headerTemplate={SettingsHeader}
                    ref={accordionItemRef}
                    title="Basic Settings"
                >
                    <BasicSettings
                        user={user}
                        data={data}
                        isEndDateUpdateable={isEndDateUpdateable}
                        isStartDateUpdateable={isStartDateUpdateable}
                        isUpdate={isUpdate}
                    />
                </Accordion.Item>
            </Accordion>

            <section
                className={navigationClassNames}
                style={{justifyContent: 'flex-end'}}
            >
                <Button
                    className={navigationButtonClassNames}
                    onClick={goToNextStep}
                >
                    Customize{' '}
                    <Icon className={nextIconClassNames} name="chevron-down" />
                </Button>
            </section>
        </div>
    )
}

CourseSettings.propTypes = {
    course: PropTypes.object,
    data: PropTypes.object,
    goToNextStep: PropTypes.func,
    isEndDateUpdateable: PropTypes.bool,
    isStartDateUpdateable: PropTypes.bool,
    isUpdate: PropTypes.bool,
    schoolSuggestions: PropTypes.object,
    updateSchoolSearch: PropTypes.func,
    user: PropTypes.shape({
        defaultCoursePrice: PropTypes.number,
    }),
    onChangeChallengeType: PropTypes.func,
}

CourseSettings.defaultProps = {
    isEndDateUpdateable: true,
    isStartDateUpdateable: true,
}

export default CourseSettings