import React from 'react'

import { SelectColumnFilter, Table } from '../../../components/mollecules'
import { IAccountRowDetail } from '../../../global/type'

const columns = [
  {
    Header: 'Chain',
    accessor: 'chain.name',
    disableFilters: true,
    disableSortBy: true,
  },
  {
    Filter: SelectColumnFilter,
    Header: 'Assets',
    accessor: 'tokenName',
    disableFilters: true,
    disableSortBy: true,
  },
  {
    Cell: ({ cell }: any) => (
      <>
        <div className="tooltip" data-tip={cell.row.tokenName}>
          {cell.row.values.amount.toFixed(4)}
        </div>
      </>
    ),
    Header: 'Quantity',
    accessor: 'amount',
    disableFilters: true,
  },
  {
    Cell: ({ cell }: any) => <>{cell.row.values.value.toFixed(2)} $</>,
    Header: 'USD',
    accessor: 'value',
    disableFilters: true,
    disableSortBy: true,
  },
  {
    Cell: ({ cell }: any) => <> {cell.row.values.price} $</>,
    Header: 'Price',
    accessor: 'price',
    disableFilters: true,
  },
]

const AccountRowDetails: React.FC<IAccountRowDetail> = ({
  balances,
  showTotal,
}) => {
  return (
    <>
      <Table
        columns={columns}
        data={balances}
        showTotal={showTotal}
        showPagination={false}
      />
    </>
  )
}

export default AccountRowDetails
