// @flow
import { Table as RsrTable } from 'react-super-responsive-table';
import React from 'react';
import styled from 'styled-components';
import type { ComponentType } from 'react';
import type { TableProps, StyledResponsiveTableProps } from './table.proptypes';
import { Tr } from './tr/index';
import { Tbody } from './t-body/index';
import { Thead } from './t-head/index';
import { bpLarge } from '../../../breakpoints';
import { getColumnHeaderWidthMobile } from './table.css-rules';

const StyledResponsiveTable = styled(
  ({ thWidth, className, ...rest }: StyledResponsiveTableProps) => (
    <RsrTable {...rest} className={className} />
  ),
)`
  width: 100%;

  @media (max-width: ${bpLarge}) {
    display: block;

    td.pivoted {
      padding-left: ${getColumnHeaderWidthMobile};
    }
  }
`;

export const Table: ComponentType<TableProps> = ({
  rows,
  headers,
  thWidth,
  className,
}: TableProps) => (
  <StyledResponsiveTable className={className} thWidth={thWidth}>
    <Thead>
      <Tr>{headers.map((h) => h)}</Tr>
    </Thead>

    <Tbody>{rows.map((r) => r)}</Tbody>
  </StyledResponsiveTable>
);

Table.displayName = 'Table';
