import React from 'react'
import PropTypes from 'prop-types'
import Button from 'react-uikit/button'
import Layout from 'react-uikit/layout'
import exportTypes from 'global/constants/course-data-export-types'
import BEMModule from 'utils/bem'
import styles from './styles.scss'

const bem = new BEMModule(styles)

class ExportOptionSelection extends React.PureComponent {
    static exportOptions = [
        'Student Engagement Score',
        'Daily Portfolio Values',
        'Student Trade History',
    ]

    state = {activeIndex: -1}

    selectOption = () => {
        if (this.state.activeIndex === -1) {
            return
        }

        const option = [
            exportTypes.ENGAGEMENT_SCORE,
            exportTypes.CLASS_PERFORMANCE,
            exportTypes.TRADE_HISTORY,
        ][this.state.activeIndex]

        this.props.selectOption?.(option)
    }

    renderOption = (label, index) => {
        const click = () => this.setState({activeIndex: index})

        return (
            <Button
                isOutline={index !== this.state.activeIndex}
                key={`export-option-${index}`}
                variant="primary"
                text={label}
                onClick={click}
            />
        )
    }

    render() {
        const contentClasses = bem.classNames(
            'c-course-data-exportation__export-options__content'
        )
        const legendClasses = bem.classNames(
            'c-course-data-exportation__export-options__legend'
        )
        const listClasses = bem.classNames(
            'c-course-data-exportation__export-options__list'
        )
        const buttonClasses = bem.classNames(
            'c-course-data-exportation__export-options__next-button',
            {disabled: this.state.activeIndex === -1}
        )

        return (
            <div>
                <Layout.Grid className={contentClasses}>
                    <span className={legendClasses}>
                        {'Choose the type of data you want to export.'}
                    </span>
                    {
                        <Layout.Grid className={listClasses} gap={16} tag="ul">
                            {ExportOptionSelection.exportOptions.map(
                                this.renderOption
                            )}
                        </Layout.Grid>
                    }
                    <Button.Next
                        className={buttonClasses}
                        onClick={this.selectOption}
                    />
                </Layout.Grid>
            </div>
        )
    }
}

ExportOptionSelection.propTypes = {
    activeIndex: PropTypes.number,
    selectOption: PropTypes.func,
}

export default ExportOptionSelection