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

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

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

const TableWithPagination = withPagination(Table)
const tableHead = [
    {value: 'ts', label: 'Last Updated'},
    {value: 'id', label: 'Security'},
    {value: 'type', label: 'Type'},
    {value: 'quantity', label: 'Quantity'},
    {value: 'price', label: 'Total Payout'},
    {value: 'status', label: ''},
]

const PortfolioPayouts = ({payouts, getPayouts, portfolio}) => {
    // Table config ============================================================
    const [currentPage, setCurrentPage] = useState(1)
    const {
        docs: data,
        pages: pageCount,
        status = requestStatuses.PENDING,
    } = payouts
    const renderRowComponent = data.length
        ? PortfolioPayoutsRow
        : PortfolioPayoutsLoadingRow

    // Fetch order data ========================================================
    const portfolioId = portfolio.id
    useEffect(() => {
        portfolioId &&
            getPayouts(
                {
                    portfolioId,
                    page: currentPage,
                },
                {overrideLoader: true}
            )
    }, [currentPage])

    // Styles ==================================================================
    const paginationClassNames = bem.classNames(
        'c-portfolio-payouts__pagination'
    )
    const tableClassNames = bem.classNames('c-portfolio-payouts__table')

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

PortfolioPayouts.propTypes = {
    getPayouts: PropTypes.func,
    pageCount: PropTypes.number,
    payouts: 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,
        status: PropTypes.string,
        total: PropTypes.number,
    }),
    payoutsCurrentPage: PropTypes.number,
    portfolio: PropTypes.object,
    onPageChange: PropTypes.func,
}

export default PortfolioPayouts