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

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

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

const TableWithPagination = withPagination(Table)

const PortfolioRationaleLog = ({
    orders,
    openRationaleSummary,
    portfolio,
    getOrders,
}) => {
    // Table config ============================================================
    const [currentPage, setCurrentPage] = useState(1)
    const {
        docs,
        pages: pageCount,
        page,
        status = requestStatuses.PENDING,
        users: orderUsers,
    } = orders
    const renderRowComponent = docs.length
        ? PortfolioRationaleLogRow
        : PortfolioRationaleLogLoadingRow
    const isSingleOwner = portfolio.userIds.length <= 1
    let tableHead = [
        {value: 'ts', label: 'Timestamp'},
        {value: 'type', label: 'Type'},
        {value: 'id', label: 'Security'},
        {value: 'strategy', label: 'Strategy'},
        {value: 'summary', label: 'Summary'},
    ]
    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])

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

    // Styles ==================================================================
    const paginationClassNames = bem.classNames(
        'c-portfolio-rationale-log__pagination'
    )
    const tableClassNames = bem.classNames('c-portfolio-rationale-log__table')

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

PortfolioRationaleLog.propTypes = {
    getOrders: PropTypes.func,
    openRationaleSummary: 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,
            })
        ),
        limit: PropTypes.number,
        page: PropTypes.number,
        pages: PropTypes.number,
        total: PropTypes.number,
        status: PropTypes.string,
        users: PropTypes.object,
    }),
    ordersCurrentPage: PropTypes.number,
    portfolio: PropTypes.object,
    onPageChange: PropTypes.func,
}

PortfolioRationaleLog.defaultProps = {
    orders: [],
}

export default PortfolioRationaleLog