import React from 'react'
import PropTypes from 'prop-types'
import ModalForm from 'react-uikit/modal/form'
import exportTypes from 'global/constants/course-data-export-types'
import ExportOptionSelection from './partials/export-option-selection'
import ExportUserSelection from './partials/export-user-selection'

class CourseDataExportationModal extends React.PureComponent {
    state = {exportOption: null}

    componentDidUpdate(prevProps) {
        // In the event that the modal was dismissed and is re-triggered to
        // appear, we want to reset the modal state.
        if (!prevProps.isShowing && this.props.isShowing) {
            this.setState({exportOption: null})
        }
    }

    selectExportOption = (exportOption) => {
        this.setState({exportOption}, () => {
            if (exportOption === exportTypes.CLASS_PERFORMANCE) {
                this.exportData()
            }
        })
    }

    exportData = (payload) => {
        const {courseId, exportData, onDismiss} = this.props

        exportData?.({
            courseId,
            options: {...payload, type: this.state.exportOption},
        }).then(onDismiss)
    }

    render() {
        const {
            courseId,
            isShowing,
            getUsersFromCourse,
            users,
            onDismiss,
        } = this.props

        const shouldShowExportUserSelection =
            this.state.exportOption === exportTypes.TRADE_HISTORY ||
            this.state.exportOption === exportTypes.ENGAGEMENT_SCORE

        return (
            <ModalForm
                isShowing={isShowing}
                title="Export Challenge Data"
                onDismiss={onDismiss}
            >
                {!this.state.exportOption && (
                    <ExportOptionSelection
                        selectOption={this.selectExportOption}
                    />
                )}

                {shouldShowExportUserSelection && (
                    <ExportUserSelection
                        courseId={courseId}
                        exportData={this.exportData}
                        users={users}
                        getUsersFromCourse={getUsersFromCourse}
                    />
                )}
            </ModalForm>
        )
    }
}

CourseDataExportationModal.propTypes = {
    courseId: PropTypes.string,
    exportData: PropTypes.func,
    getUsersFromCourse: PropTypes.func,
    isShowing: PropTypes.bool,
    users: PropTypes.array,
    onDismiss: PropTypes.func,
}

CourseDataExportationModal.defaultProps = {
    users: [],
}

export default CourseDataExportationModal