import React from 'react'
import PropTypes from 'prop-types'
// import moment from 'moment'
import inputNames from 'common-fe/constants/input-names'
import {TODAY} from 'global/constants/expiration'
import BEMModule from 'utils/bem'
import {getFeesContent} from '../../helpers'
import content from '../../content'
import styles from '../../styles.scss'
const bem = new BEMModule(styles)

import Form from 'react-uikit/form'
import Icon from 'react-uikit/icon'
import TextInput from 'react-uikit/input-text'
import Tooltip from 'react-uikit/tooltip'
import CalendarDateInput from 'components/calendar-date-input'

// const dateFormat = 'MMMM D, YYYY'

const BasicSettings = ({
    data,
    // isEndDateUpdateable,
    // isStartDateUpdateable,
    // isUpdate,
    user,
}) => {
    const feesContent = getFeesContent({data, user})

    const sectionInputSideLabelClassNames = bem.classNames(
        'c-course-creation__section-input',
        {'side-label': true}
    )
    const endDateClassNames = bem.classNames('c-course-creation__end-date')
    const startDateClassNames = bem.classNames('c-course-creation__start-date')
    const helpIconClassNames = bem.classNames('c-course-creation__help-icon')
    const sectionHeadingClassNames = bem.classNames(
        'c-course-creation__section-heading'
    )
    // const fixedValueClassNames = bem.classNames('c-course-creation__fixed-value', {
    //     static: isUpdate,
    // })

    return (
        <div style={{marginBottom: '3.2rem'}}>
            <section
                className={sectionInputSideLabelClassNames}
                style={{marginTop: 0}}
            >
                <label htmlFor={inputNames.COURSE_NAME}>Challenge Name</label>

                <Form.Field
                    maxLength={100}
                    name={inputNames.COURSE_NAME}
                    render={TextInput}
                    required
                    size="small"
                />
            </section>

            <section className={sectionInputSideLabelClassNames}>
                <label htmlFor={inputNames.COURSE_CODE}>
                    <span data-tip="" data-for="courseNumberInfo">
                        Challenge ID
                        <Icon
                            name="tab-support"
                            className={helpIconClassNames}
                        />
                        <Tooltip id="courseNumberInfo">
                            <p>{content.courseNumberHelpText}</p>
                        </Tooltip>
                    </span>
                </label>

                <Form.Field
                    maxLength={30}
                    name={inputNames.COURSE_CODE}
                    placeholder={`e.g. FIN 101 - Section 100 (Fall ${new Date().getFullYear()})`}
                    render={TextInput}
                    required
                    size="small"
                />
            </section>

            <section
                className={sectionInputSideLabelClassNames}
                style={{gridTemplateColumns: '14.4rem 1fr 1fr'}}
            >
                <label htmlFor={inputNames.COURSE_START_DATE}>
                    Challenge Dates
                </label>

                <div className={startDateClassNames}>
                    {/* {isStartDateUpdateable ? ( */}
                    <Form.Field
                        dateFormat="y-m-d"
                        name={inputNames.COURSE_START_DATE}
                        placeholder="YY-MM-DD"
                        render={CalendarDateInput}
                        required
                        size="small"
                    />
                    {/* ) : (
                        <span className={fixedValueClassNames}>{moment(data.startDate[0]).format(dateFormat)}</span>
                    )} */}
                </div>

                <div className={endDateClassNames}>
                    {/* {isEndDateUpdateable ? ( */}
                    <Form.Field
                        dateFormat="y-m-d"
                        minDate={TODAY}
                        name={inputNames.COURSE_END_DATE}
                        placeholder="YY-MM-DD"
                        render={CalendarDateInput}
                        required
                        size="small"
                    />
                    {/* ) : (
                        <span className={fixedValueClassNames}>{moment(data.endDate[0]).format(dateFormat)}</span>
                    )} */}
                </div>
            </section>

            <section className={sectionHeadingClassNames}>
                <h2>Registration Fees</h2>
                <p style={{marginBottom: 0}}>{feesContent}</p>
            </section>
        </div>
    )
}

BasicSettings.propTypes = {
    data: PropTypes.object,
    isEndDateUpdateable: PropTypes.bool,
    isStartDateUpdateable: PropTypes.bool,
    isUpdate: PropTypes.bool,
    user: PropTypes.shape({
        defaultCoursePrice: PropTypes.number,
    }),
}

export default BasicSettings