import React from 'react'
import PropTypes from 'prop-types'
import BEMModule from 'utils/bem'
import content from './content'
import Illustration from 'react-uikit/illustration'
import LogoBar from 'components/logo-bar'
import styles from './styles.scss'

const bem = new BEMModule(styles)

const CompetitionContentSection = ({
    className,
    data: {name, welcomeMessage, description},
    id,
}) => {
    const classes = bem.classNames('c-competition-content', className)
    const mainClasses = bem.classNames('c-competition-content__main')
    const titleClasses = bem.classNames('c-competition-content__title')
    const subtitleClasses = bem.classNames('c-competition-content__subtitle')
    const descriptionClasses = bem.classNames(
        'c-competition-content__description'
    )
    const cloudClasses = bem.classNames(
        'c-competition-content__illustration--cloud'
    )
    const teamworkClasses = bem.classNames(
        'c-competition-content__illustration--teamwork'
    )
    const detailsClasses = bem.classNames('c-competition-content__details')
    const detailValueClasses = bem.classNames(
        'c-competition-content__details__value'
    )
    const detailsTitleClasses = bem.classNames(
        'c-competition-content__details-title'
    )
    const prizesClasses = bem.classNames('c-competition-content__prizes')

    return (
        <div className={classes}>
            <Illustration name="cloud-one" className={cloudClasses} />
            <Illustration name="teamwork" className={teamworkClasses} />
            <LogoBar />

            <main className={mainClasses}>
                <h1 className={titleClasses}>{name}</h1>
                <h2 className={subtitleClasses}>{welcomeMessage}</h2>

                <div className={descriptionClasses}>
                    <p>{description}</p>
                    {/* eslint-disable react/display-name, react/prop-types */}
                    {content[id]?.PRIZES && (
                        <React.Fragment>
                            <h3 className={detailsTitleClasses}>Prizes</h3>
                            <div className={prizesClasses}>
                                {content[id]?.PRIZES.map(({value}, i) => (
                                    <React.Fragment key={`prizes-${i}`}>
                                        <span className={detailValueClasses}>
                                            {value}
                                        </span>
                                    </React.Fragment>
                                ))}
                            </div>
                        </React.Fragment>
                    )}

                    <h3 className={detailsTitleClasses}>Details</h3>

                    <div className={detailsClasses}>
                        {content[id]?.DETAILS.map(({key, value}, i) => (
                            <React.Fragment key={`details-${i}`}>
                                <span>
                                    <strong>{key}:</strong>
                                </span>
                                <span className={detailValueClasses}>
                                    {value}
                                </span>
                            </React.Fragment>
                        ))}
                    </div>

                    <h3 className={detailsTitleClasses}>Timeline</h3>

                    <div className={detailsClasses}>
                        {content[id]?.DEADLINES.map(({key, value}, i) => (
                            <React.Fragment key={`timeline-${i}`}>
                                <span>
                                    <strong>{key}:</strong>
                                </span>
                                <span className={detailValueClasses}>
                                    {value}
                                </span>
                            </React.Fragment>
                        ))}
                    </div>
                </div>
            </main>
        </div>
    )
}

CompetitionContentSection.propTypes = {
    data: PropTypes.object.isRequired,
    className: PropTypes.string,
    id: PropTypes.string,
}

export default CompetitionContentSection