/* eslint-disable */
import React, {useCallback, useEffect, useMemo, useState} from 'react'
import {PoseGroup} from 'react-pose'
import AnimateCollapse from '../animate-collapse'
import AnimateEnterExit from '../animate-enter-exit'
import BEMModule from 'utils/bem'
import Button from 'react-uikit/button'
import CourseAttachedPortfolio from 'components/course-attached-portfolio'
import CourseBadges from 'components/course-badges'
import CourseCompletedBanner from 'components/course-completed-banner'
import CourseDescription from 'components/course-description'
import CourseExportData from 'components/course-export-data'
import CourseHeadline from 'components/course-headline'
import CourseHeadlineCollapsed from 'components/course-headline-collapsed'
import CourseNav from '../course-nav'
import CourseOwnerPanel from 'components/course-owner-panel'
import CourseParticipants from 'components/course-participants'
import Icon from 'react-uikit/icon'
import Layout from 'components/layout'
import PropTypes from 'prop-types'
import styles from './styles.scss'

const bem = new BEMModule(styles)

const CourseLayout = ({
    activeTab,
    blank,
    children,
    course,
    getPortfolioTimeseries,
    policy: {isOwner, isProfessor},
    portfolio,
    tabs,
    timeseries,
    onDataExport,
    onInviteUsers,
}) => {
    const [isCollapsed, setCollapsed] = useState(true)
    const toggleCollapsed = useCallback(
        () => setCollapsed((isCollapsed) => !isCollapsed),
        [setCollapsed]
    )
    const hasEnded = useMemo(
        () => new Date(course?.endDate).getTime() < new Date().getTime(),
        [course?.endDate]
    )

    useEffect(() => {
        if (!portfolio?.id) {
            return
        }

        getPortfolioTimeseries?.({portfolioId: portfolio.id})
    }, [portfolio?.id])

    useEffect(() => {
        if (course.isResolved) {
            setCollapsed(!isOwner)
        }
    }, [course.isResolved, isOwner])

    const navClassNames = bem.classNames('c-course-layout__nav')
    const headerClassNames = bem.classNames('c-course-layout__header')
    const ownerClassNames = bem.classNames('c-course-layout__owner')
    const toggleCollapseClassNames = bem.classNames(
        'c-course-layout__toggle-collapse'
    )
    const toggleCollapseButtonClassNames = bem.classNames(
        'c-course-layout__toggle-collapse__button',
        {open: !isCollapsed}
    )
    const infoClassNames = bem.classNames('c-course-layout__info')
    const detailsClassNames = bem.classNames('c-course-layout__details')
    const gutterClassNames = bem.classNames('c-course-layout__gutter')
    const courseEndedClassNames = bem.classNames(
        'c-course-layout__course-ended'
    )

    if ((isProfessor, !course.id)) {
        return <>{!blank && children}</>
    }

    return (
        <React.Fragment>
            <CourseNav
                activeTab={activeTab}
                className={navClassNames}
                course={course}
                portfolio={portfolio}
                tabs={tabs}
                isOwner={isOwner}
            />

            <Layout.Section hasBackground className={headerClassNames}>
                {isOwner && !hasEnded && (
                    <CourseOwnerPanel
                        className={ownerClassNames}
                        name={course.name}
                        onInvite={onInviteUsers}
                    />
                )}
                <div className={toggleCollapseClassNames}>
                    <Button
                        className={toggleCollapseButtonClassNames}
                        onClick={toggleCollapsed}
                    >
                        <Icon name="chevron-down" />
                    </Button>
                    <AnimateCollapse
                        pose={isCollapsed ? 'collapsed' : 'expanded'}
                    >
                        <PoseGroup>
                            {isCollapsed ? (
                                <AnimateEnterExit key="collapsed-info">
                                    <CourseHeadlineCollapsed
                                        course={course}
                                        onExpand={toggleCollapsed}
                                    />
                                </AnimateEnterExit>
                            ) : (
                                <AnimateEnterExit key="expanded-info">
                                    <section className={infoClassNames}>
                                        <CourseHeadline
                                            course={course}
                                            className={gutterClassNames}
                                        />
                                        <CourseParticipants
                                            course={course}
                                            isOwner={isOwner}
                                        />
                                        {isOwner ? (
                                            <CourseExportData
                                                onExportData={onDataExport}
                                                isOwner={isOwner}
                                            />
                                        ) : (
                                            <CourseAttachedPortfolio
                                                portfolio={portfolio}
                                                timeseries={timeseries}
                                            />
                                        )}
                                    </section>
                                    <section className={detailsClassNames}>
                                        <CourseDescription course={course} />
                                        <CourseBadges
                                            courseId={course?.id}
                                            portfolioId={portfolio?.id}
                                            isOwner={isOwner}
                                            isComplete={hasEnded}
                                        />
                                    </section>
                                </AnimateEnterExit>
                            )}
                        </PoseGroup>
                    </AnimateCollapse>
                </div>
            </Layout.Section>

            {portfolio && hasEnded && (
                <Layout.Section>
                    <CourseCompletedBanner
                        className={courseEndedClassNames}
                        course={course}
                        portfolioId={portfolio.id}
                    />
                </Layout.Section>
            )}
            {!blank && children}
        </React.Fragment>
    )
}

CourseLayout.propTypes = {
    activeTab: PropTypes.number,
    blank: PropTypes.bool,
    children: PropTypes.node,
    course: PropTypes.object,
    getPortfolioTimeseries: PropTypes.func,
    policy: PropTypes.object,
    portfolio: PropTypes.object,
    tabs: PropTypes.array,
    timeseries: PropTypes.object,
    onDataExport: PropTypes.func,
    onInviteUsers: PropTypes.func,
}

export default CourseLayout