import React, {useEffect, useState} from 'react'
import PropTypes from 'prop-types'
import {areFieldsInvalid, getSumOfRankingWeights} from '../../helpers'
import BEMModule from 'utils/bem'
import styles from '../../styles.scss'

import Icon from 'react-uikit/icon'

const bem = new BEMModule(styles)

const ChallengeSettingsHeader = ({data, fields, open, title}) => {
    const [validationSymbol, setValidationSymbol] = useState(`?`)
    const [hasOpened, setHasOpened] = useState(false)
    const [hasTouched, setHasTouched] = useState(false)
    const isInvalidSection = areFieldsInvalid({data, fields})

    useEffect(() => {
        if (open) {
            setHasOpened(true)
        }
    }, [open])

    useEffect(() => {
        if (getSumOfRankingWeights({data}) > 0) {
            setHasTouched(true)
        }
    }, [data])

    useEffect(() => {
        const validSymbol = `✓`
        const invalidSymbol = `✗`
        if (hasOpened) {
            setValidationSymbol(isInvalidSection ? invalidSymbol : validSymbol)
        }
    }, [data])

    const headingClasses = bem.classNames('c-course-creation__heading', {
        valid: !isInvalidSection && hasOpened,
        invalid: isInvalidSection && hasOpened && hasTouched,
    })
    const toggleClasses = bem.classNames('c-course-creation__toggle', {open})

    return (
        <React.Fragment>
            <h2 className={headingClasses} data-valid-symbol={validationSymbol}>
                {title}
            </h2>

            <Icon name="chevron-down" className={toggleClasses} />
        </React.Fragment>
    )
}

ChallengeSettingsHeader.propTypes = {
    data: PropTypes.object,
    fields: PropTypes.array,
    open: PropTypes.bool,
    title: PropTypes.string,
}

export default ChallengeSettingsHeader