import React, {useState, useEffect, useMemo} from 'react'
import PropTypes from 'prop-types'
import requestStatuses from 'common-fe/constants/request-statuses'

import PortfolioActivityOrderStatusRow from './partials/row'
import PortfolioActivityOrderLoadingRow from './partials/loading-row'
import Table, {withPagination} from 'react-uikit/table'

import styles from './styles.scss'
import BEMModule from 'utils/bem'
const bem = new BEMModule(styles)

const TableWithPagination = withPagination(Table)

const PortfolioActivityOrderStatus = ({
    openCancelConfirmation,
    openStatusInfo,
    orders,
    portfolio,
    getOrders,
}) => {
    // Table config ============================================================
    const [currentPage, setCurrentPage] = useState(1)
    const {
        docs,
        pages: pageCount,
        status = requestStatuses.PENDING,
        users: orderUsers,
    } = orders
    const renderRowComponent = docs.length
        ? PortfolioActivityOrderStatusRow
        : PortfolioActivityOrderLoadingRow

    let tableHead = [
        {value: 'ts', label: 'Timestamp'},
        {value: 'type', label: 'Type'},
        {value: 'id', label: 'Security'},
        {value: 'order', label: 'Transaction'},
        {value: 'amount', label: 'Amount'},
        {value: 'statusMessage', label: ''},
    ]

    const isSingleOwner = portfolio.userIds.length <= 1

    if (!isSingleOwner) {
        tableHead = [
            ...tableHead.slice(0, 1),
            {value: 'user', label: ''},
            ...tableHead.slice(1),
        ]
    }

    // Fetch order data ========================================================
    const portfolioId = portfolio.id

    useEffect(() => {
        portfolioId &&
            getOrders(
                {
                    include: 'all',
                    portfolioId,
                    page: currentPage,
                },
                {overrideLoader: true}
            )
    }, [currentPage, portfolioId])

    // Format order data =======================================================
    const data = useMemo(
        () =>
            docs.map((order) => ({
                ...order,
                user: orderUsers[order.firebaseId],
            })),
        [docs.length, currentPage]
    )

    // Styles ==================================================================
    const paginationClassNames = bem.classNames(
        'c-portfolio-activity-order-status__pagination'
    )
    const tableClassNames = bem.classNames(
        'c-portfolio-activity-order-status__table'
    )

    return (
        <TableWithPagination
            className={tableClassNames}
            currentPage={currentPage}
            data={data}
            onPageChange={setCurrentPage}
            pageCount={pageCount}
            paginationClassName={paginationClassNames}
            renderRow={renderRowComponent}
            rowProps={{
                openCancelConfirmation,
                openStatusInfo,
                isSingleOwner,
            }}
            scrollToTopOnPageChange
            status={status}
            tableHead={tableHead}
        />
    )
}

PortfolioActivityOrderStatus.propTypes = {
    getOrders: PropTypes.func,
    openCancelConfirmation: PropTypes.func,
    openStatusInfo: PropTypes.func,
    orders: PropTypes.shape({
        docs: PropTypes.arrayOf(
            PropTypes.shape({
                displayName: PropTypes.string,
                exchange: PropTypes.string,
                id: PropTypes.string,
                quantity: PropTypes.number,
                status: PropTypes.string,
                statusMessage: PropTypes.string,
                ticker: PropTypes.string,
                tradeAction: PropTypes.string,
            })
        ),
        users: PropTypes.object,
        limit: PropTypes.number,
        page: PropTypes.number,
        pages: PropTypes.number,
        status: PropTypes.string,
        total: PropTypes.number,
    }),
    portfolio: PropTypes.object,
}

PortfolioActivityOrderStatus.defaultProps = {
    orders: [],
}

export default PortfolioActivityOrderStatus