import {ChevronDownIcon, ChevronRightIcon,} from '@heroicons/react/solid'
import React from 'react'
import useBots from '../../../hooks/useBots'
import {SelectColumnFilter, Table} from '../../mollecules'
import StatusBadge from '../StatusBadge/StatusBadge'
import Summary from '../Trading/Summary'
import BotRowDetails from './botRowDetails'

export default function ActiveBots() {
    const {data: bots = []} = useBots({})

    const columns = React.useMemo(
        () => [
            {
                Cell: ({row}: any) => (
                    // Use Cell to render an expander for each row.
                    // We can use the getToggleRowExpandedProps prop-getter
                    // to build the expander.
                    <span {...row.getToggleRowExpandedProps()}>
            {row.isExpanded ? (
                <ChevronDownIcon></ChevronDownIcon>
            ) : (
                <ChevronRightIcon></ChevronRightIcon>
            )}
          </span>
                ),

                // Make sure it has an ID
                Header: ({getToggleAllRowsExpandedProps, isAllRowsExpanded}: any) => (
                    <span {...getToggleAllRowsExpandedProps()}>
            {isAllRowsExpanded ? 'v' : '>'}
          </span>
                ),
                // Build our expander column
                id: 'expander',
            },
            {
                Cell: ({cell}: any) => (
                    <>
                        <StatusBadge
                            status={cell.row.values.status}
                            isForWatchOnly={cell.row.values.isForWatchingOnly}
                        />
                    </>
                ),
                Header: 'Status',
                accessor: 'status',
                disableFilters: true,
                disableSortBy: true,
                search: false,
            },
            {
                accessor: 'isForWatchingOnly',
                disableFilters: true,
                disableSortBy: true,
                search: false,
            },
            {
                Filter: SelectColumnFilter,
                Header: 'Ticker',
                accessor: 'ticker',
                disableSortBy: true,
            },
            {
                Header: 'Name',
                accessor: 'name',
            },
            {
                Filter: SelectColumnFilter,
                Header: 'Timeframe',
                accessor: 'timeframe',
                disableSortBy: true,
            },
            {
                Cell: ({cell}: any) => <>{cell.row.values.winRate} %</>,
                Header: 'Winrate',
                accessor: 'winRate',
                disableFilters: true,
            },
            {
                Cell: ({cell}: any) => <>{cell.row.values.profitAndLoss} $</>,
                Header: 'PNL',
                accessor: 'profitAndLoss',
                disableFilters: true,
            },
        ],
        []
    )

    const renderRowSubComponent = React.useCallback(
        ({row}: any) => (
            <>
                <BotRowDetails
                    bot={row.original}
                ></BotRowDetails>
            </>
        ),
        []
    )

    return (
        <>
            <div className="flex flex-wrap">
                <Summary bots={bots}></Summary>
            </div>
            <div className="flex flex-wrap">
                <Table
                    columns={columns}
                    data={bots}
                    renderRowSubCompontent={renderRowSubComponent}
                    hiddenColumns={['isForWatchingOnly']}
                />
            </div>
        </>
    )
}
