import React from 'react'
import { useMobileMediaQuery } from '../../../Media'
import { Table } from '../../../Table/Table'
import { Loader } from '../../../Loader/Loader'
import { Pagination } from '../../../Pagination/Pagination'
import { Props } from './TableContent.types'
import './TableContent.css'

const TABLE_SIBLINGS_RANGE_MOBILE = 0
const TABLE_SIBLINGS_RANGE_DESKTOP = 1
export const ROWS_PER_PAGE = 10

const TableContent = (props: Props) => {
  const {
    empty,
    data,
    isLoading,
    totalPages,
    activePage = 1,
    setPage,
    total,
    rowsPerPage = ROWS_PER_PAGE,
    hasHeaders = false,
    customHeaders = {},
    i18n
  } = props

  const isMobile = useMobileMediaQuery()
  const attributes = data.length > 0 ? Object.keys(data[0]) : null
  const hasPagination = totalPages && totalPages > 1

  return (
    <div
      className={`dui-table-content ${
        !hasPagination ? 'dui-table-content--radius-ending' : ''
      } ${!hasHeaders ? 'dui-table-content__headers--empty' : ''}`}
    >
      {isLoading ? (
        <div className="dui-table-content__table--empty">
          <Loader active data-testid="loader" />
        </div>
      ) : attributes ? (
        <Table basic="very" data-testid="table-content">
          <Table.Body
            className={isLoading ? 'dui-table-content__table--loading' : ''}
          >
            <Table.Row>
              {attributes.map((attr) => (
                <Table.HeaderCell key={attr}>
                  <span>
                    {customHeaders[attr] ? customHeaders[attr] : attr}
                  </span>
                </Table.HeaderCell>
              ))}
            </Table.Row>
            {data?.map((data: unknown, index) => (
              <Table.Row key={index}>
                {attributes.map((attr: string) => (
                  <Table.Cell
                    style={{
                      width: `${100 / attributes.length}%`
                    }}
                    key={attr}
                  >
                    {data[attr]}
                  </Table.Cell>
                ))}
              </Table.Row>
            ))}
          </Table.Body>
        </Table>
      ) : (
        empty()
      )}
      {hasPagination && total && props.activePage !== undefined ? (
        <div className="dui-table-content__pagination">
          {`${i18n.sortBy.showing} ${
            (activePage - 1) * rowsPerPage + 1
          }-${Math.min(activePage * rowsPerPage, total)}  ${
            i18n.sortBy.of
          } ${total}`}
          <Pagination
            siblingRange={
              isMobile
                ? TABLE_SIBLINGS_RANGE_MOBILE
                : TABLE_SIBLINGS_RANGE_DESKTOP
            }
            activePage={activePage}
            totalPages={totalPages}
            onPageChange={(_event, props) =>
              setPage && setPage(+props.activePage)
            }
            firstItem={null}
            lastItem={null}
          />
        </div>
      ) : null}
    </div>
  )
}

TableContent.defaultProps = {
  i18n: {
    sortBy: {
      showing: 'Showing',
      of: 'of'
    }
  }
}

export default React.memo(TableContent)