import React, {useMemo, useCallback, useEffect, useState, useRef} from 'react'
import PropTypes from 'prop-types'
// import ric from 'request-idle-callback'
// import modalTypes from 'containers/modal-manager/modal-types'
import metricIds from 'global/constants/metric-ids'
import useMedia from 'global/hooks/use-media'
import BEMModule from 'utils/bem'
import content, {PERIODS} from './content'
import styles from './styles.scss'
import withPortfolioPage from '../portfolio-page'

import TabsWithSlider from 'react-uikit/tabs/with-slider'
import Layout from 'components/layout'
import LeaderboardTable from 'components/leaderboard-table'
import RankingSharpeRatioFormula from 'components/ranking-sharpe-ratio-formula'

const bem = new BEMModule(styles)
const MOBILE_BREAKPOINT = '(max-width: 420px)'

const PortfolioRankingPage = ({
    getRankings,
    metrics,
    portfolio,
    portfolioRanking,
    portfolios: portfolioList,
    rankings,
    rowsPerPage,
    showModal,
}) => {
    const {id: portfolioId, isPublic, name} = portfolio
    const {[MOBILE_BREAKPOINT]: isMobile} = useMedia([MOBILE_BREAKPOINT])
    const [currentPage, setCurrentPage] = useState(1)
    const [currentPeriod, setPeriod] = useState(PERIODS[1])
    const [isJumpToRank, setIsJumpToRank] = useState(false)
    const table = useRef(React.createRef())
    const periods = useMemo(() =>
        PERIODS.map(({value, label, labelMobile}) => ({
            value,
            label: isMobile ? labelMobile : label,
        }))
    )
    const {data, pages} = rankings[currentPeriod.value]
    const rankingParams = {
        sortBy: 'sharpe',
        period: currentPeriod.value,
    }

    const handleSetPeriod = (data) => {
        setPeriod(data.item)
    }
    // TODO: fix showing of users
    // const handleShowUsers = ({portfolio, users}) => {
    //     showModal?.({type: modalTypes.MODAL_MANAGERS_INFO, portfolio, users})
    // }

    const tabIndex = PERIODS.findIndex(
        (filter) => filter.value === currentPeriod.value
    )

    const jumpToRank = useCallback(() => {
        const {rawRank} = portfolioRanking[currentPeriod.value]
        const page = Math.ceil(Number(rawRank / rowsPerPage))
        setIsJumpToRank(true)
        setCurrentPage(page)
    }, [portfolioRanking, rowsPerPage])

    // Fetch current user data
    useEffect(() => {
        getRankings?.({
            metricId: metricIds.SHARPE_RATIO,
            period: currentPeriod.value,
            portfolioId,
        })
    }, [portfolioId, currentPeriod.value])

    // Fetch paginated data
    useEffect(() => {
        getRankings?.({
            metricId: metricIds.SHARPE_RATIO,
            page: currentPage,
            period: currentPeriod.value,
        }).then(() => {
            if (isJumpToRank) {
                const {rawRank} = portfolioRanking[currentPeriod.value]
                const index = (rawRank % rowsPerPage) - 1

                table.current?.expandIndex(index)
                setIsJumpToRank(false)
            }
        })
    }, [currentPage, currentPeriod.value])

    const headingClasses = bem.classNames('c-portfolio-ranking-page__heading')
    const metricsClasses = bem.classNames('c-portfolio-ranking-page__metrics')
    const portfolioHeadingClasses = bem.classNames(
        'c-portfolio-ranking-page__portfolio'
    )
    const rankingClasses = bem.classNames('c-portfolio-ranking-page__ranking')
    const titleClasses = bem.classNames('c-portfolio-ranking-page__title')
    const tabsClasses = bem.classNames('c-portfolio-ranking-page__tabs')
    const hrClasses = bem.classNames('c-portfolio-ranking-page__hr')
    const tabSliderClasses = bem.classNames('c-portfolio-ranking-page__slider')
    const tabItemClasses = bem.classNames('c-portfolio-ranking-page__tab-item')

    return (
        <React.Fragment>
            <Layout.Section hasMobilePadding className={headingClasses}>
                <div>&nbsp;</div>
                <div>
                    <TabsWithSlider
                        activeIndex={tabIndex}
                        className={tabsClasses}
                        itemClassName={tabItemClasses}
                        items={periods}
                        onItemSelected={handleSetPeriod}
                    >
                        <TabsWithSlider.Items />
                        <TabsWithSlider.Slider className={tabSliderClasses} />
                    </TabsWithSlider>
                    <hr className={hrClasses} />
                </div>
                <div className={titleClasses}>
                    <h1>{content.title}</h1>
                    <h3>
                        <a
                            href={content.learnMoreUrl}
                            target="_blank"
                            rel="noopener noreferrer"
                        >
                            Sharpe Ratio
                        </a>
                        &nbsp;{content.description}
                    </h3>
                </div>
                <section className={metricsClasses}>
                    <div className={portfolioHeadingClasses}>
                        {name} Sharpe Ratio Breakdown
                    </div>
                    <RankingSharpeRatioFormula
                        currentPeriod={currentPeriod.value}
                        metrics={metrics}
                        name={portfolio.name}
                        periodDisplay={currentPeriod.label}
                        portfolio={portfolio}
                        portfolioRanking={portfolioRanking}
                        isPublic={isPublic}
                        jumpToRank={jumpToRank}
                    />
                </section>
            </Layout.Section>
            <Layout.Section hasMobilePadding>
                <Layout.Section hasBackground className={rankingClasses}>
                    <LeaderboardTable
                        currentPage={currentPage}
                        list={data}
                        metricId={rankingParams.sortBy}
                        pageCount={pages}
                        period={rankingParams.period}
                        portfolios={portfolioList}
                        ref={table}
                        setPage={setCurrentPage}
                        showModal={showModal}
                        title={`“${currentPeriod.label}” Leaderboard`}
                    />
                </Layout.Section>
            </Layout.Section>
        </React.Fragment>
    )
}

PortfolioRankingPage.pageTitle = 'Global Ranking'

PortfolioRankingPage.propTypes = {
    getPublicPortfolio: PropTypes.func,
    getRank: PropTypes.func,
    getRankings: PropTypes.func,
    getTimeseries: PropTypes.func,
    metrics: PropTypes.object,
    portfolio: PropTypes.object,
    portfolioRanking: PropTypes.object,
    portfolios: PropTypes.array,
    rankings: PropTypes.shape({
        data: PropTypes.array,
        error: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
        isLoading: PropTypes.bool,
        page: PropTypes.number,
        pages: PropTypes.number,
        portfolios: PropTypes.object,
    }),
    rowsPerPage: PropTypes.number,
    showModal: PropTypes.func,
    timeseries: PropTypes.object,
}

PortfolioRankingPage.defaultProps = {
    metrics: {},
    rankings: {},
    rowsPerPage: 10,
    timeseries: {},
}

export default withPortfolioPage(PortfolioRankingPage)