import React, {useCallback, useEffect, useMemo, useState} from 'react'
import PropTypes from 'prop-types'
import requestStatuses from 'common-fe/constants/request-statuses'
import metricIds from 'global/constants/metric-ids'
import modalTypes from 'containers/modal-manager/modal-types'
import BEMModule from 'utils/bem'
import {getRankingKey} from 'store/helpers/ranking-data'
import {makeTab} from './helpers'
import {withCourse} from '../../context'
import styles from './styles.scss'

import Layout from 'components/layout'
import ParticipantsTable from 'components/participants-table'
import TableTabs from 'components/table-tabs'
import HeaderTemplate from 'components/table-row-heading'
import Body from './partials/body-template'

const bem = new BEMModule(styles)

const CourseParticipantsPage = ({
    course,
    challengeRankings,
    getRankings,
    showModal,
}) => {
    const {data = [], page = 1, pages = 1, status = requestStatuses.PENDING} =
        challengeRankings || {}

    const courseId = course.id

    const tabViews = useMemo(() => {
        if (course.hasRankingWeights) {
            return [
                {label: 'Combined Score', value: metricIds.TOTAL_SCORE},
                ...Object.entries(course.rankingWeights)
                    // eslint-disable-next-line no-unused-vars
                    .filter(([_, value]) => value !== 0 && value !== null)
                    .sort((a, b) => b[1] - a[1])
                    .map(([key]) => makeTab(key)),
            ]
        }

        return [{label: 'Sharpe Ratio', value: metricIds.SHARPE_RATIO}]
    }, [courseId])

    const [activeIndex, setActiveIndex] = useState(0)
    const [activePage, setActivePage] = useState(1)
    const currentTab = tabViews[activeIndex]
    const onTabChange = useCallback(({index}) => setActiveIndex(index), [])

    useEffect(() => {
        const payload = {
            courseId,
            page: activePage,
            sortBy: currentTab.value /* , sortOrder */,
        }

        if (payload.sortBy === metricIds.TOTAL_SCORE) {
            delete payload.sortBy
        }

        getRankings?.(payload)
    }, [activePage, courseId, currentTab.value])

    // Set active tab to first tab when changing courses
    useEffect(() => {
        setActiveIndex(0)
    }, [courseId])

    const onShowPortfolio = useCallback((portfolioId) => {
        showModal?.({type: modalTypes.MODAL_PORTFOLIO_SHOWCASE, portfolioId})
    }, [])

    const onShowScoreBreakdown = useCallback(
        ({engagement, portfolio, metrics, user}) => {
            showModal?.({
                type: modalTypes.MODAL_COURSE_SCORE_BREAKDOWN,
                engagement,
                portfolio,
                metrics,
                user,
            })
        },
        []
    )

    const showRegistrationUrl = useCallback(() => {
        showModal?.({
            type: modalTypes.MODAL_COURSE_JOIN_LINK,
            courseId,
            name: course.name,
        })
    }, [courseId])

    const handleShowUsers = ({portfolio, users}) => {
        showModal?.({type: modalTypes.MODAL_MANAGERS_INFO, portfolio, users})
    }

    // Render
    // -------------------------------------------------------------------------
    const tabsClasses = bem.classNames('c-course-participants__tabs')
    const tableClasses = bem.classNames('c-course-participants__table')
    const paginationClasses = bem.classNames(
        'c-course-participants__table-pagination'
    )

    const BodyTemplate = useMemo(
        () => withCourse(Body, {onShowPortfolio, onShowScoreBreakdown}),
        []
    )

    return (
        <Layout.Section hasBackground>
            <TableTabs
                className={tabsClasses}
                setTab={onTabChange}
                tabIndex={activeIndex}
                tabs={tabViews}
                theme="light"
            />
            <ParticipantsTable
                bodyTemplate={BodyTemplate}
                className={tableClasses}
                data={data}
                headerTemplate={HeaderTemplate}
                shouldDisplayPortfolioName={course?.isTeamPortfolios}
                isError={status === requestStatuses.REJECTED}
                isLoading={status === requestStatuses.PENDING}
                page={page}
                pageCount={pages}
                paginationClassName={paginationClasses}
                showRegistrationUrl={showRegistrationUrl}
                sortBy={getRankingKey(tabViews[activeIndex])}
                onAvatarClick={handleShowUsers}
                onPageChange={setActivePage}
                onShowPortfolio={onShowPortfolio}
            />
        </Layout.Section>
    )
}

CourseParticipantsPage.propTypes = {
    challengeRankings: PropTypes.object,
    course: PropTypes.object,
    getRankings: PropTypes.func,
    showAlert: PropTypes.func,
    showModal: PropTypes.func,
}

export default CourseParticipantsPage