import React, { useMemo } from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { CardTableProvider } from 'Components/cardTable/cardTableContext';
import space from 'Components/utils/styles/space';
import statusTypes from 'Components/utils/types/statusTypes';
import { textSize } from 'Themes/utils/fontPickers';
import { grayColor } from 'Themes/utils/colorPickers';
import { screenSize } from 'Themes/utils/mediaQueries';
import Card from './card/card';
import CardItem from './cardItems/cardItem';
import CardItemHeader from './cardItems/cardItemHeader';
import { ITEMS_WIDTH_PERCENT, ACTIONS_WIDTH_PERCENT } from './constants';

const StyledTable = styled.div`
  ${space}
  width: 100%;

  @media ${screenSize('desktop')} {
    display: flex;
    flex-direction: column;
  }
`;

const TableHeader = styled.div`
  display: none;

  @media ${screenSize('desktop')} {
    display: flex;

    font-size: ${textSize('S')};
    font-weight: bold;
    color: ${grayColor};
    margin: 0 8px;
    padding: 0 8px;
  }
`;

const HeaderItems = styled.div`
  flex-basis: ${ITEMS_WIDTH_PERCENT}%;
  display: flex;
`;

const HeaderActions = styled.div`
  flex-basis: ${ACTIONS_WIDTH_PERCENT}%;
  margin: 0 16px 0 0;
`;

const renderCardItems = card =>
  Object.entries(card)
    .filter(([key]) => key !== 'status')
    .map(([key, value]) => (
      <CardItem key={`item-${key}`} type={key} value={value} />
    ));

const renderCards = cards =>
  cards.map((card, cardIndex) => {
    return (
      <Card key={`card-${cardIndex}`} {...card}>
        {renderCardItems(card)}
      </Card>
    );
  });

const CardTable = ({ sections, cards, ...props }) => {
  const hasActions = useMemo(
    () => cards.some(card => !!card.actions && card.actions.length > 0),
    [cards],
  );

  return (
    <StyledTable {...props}>
      <TableHeader {...props}>
        <HeaderItems>
          {sections.map(section => (
            <CardItemHeader key={`header-${section.type}`} {...section} />
          ))}
        </HeaderItems>
        {hasActions && (
          <HeaderActions>
            <CardItemHeader key="header-actions" type="actions" />
          </HeaderActions>
        )}
      </TableHeader>

      <CardTableProvider value={{ sections }}>
        {renderCards(cards)}
      </CardTableProvider>
    </StyledTable>
  );
};

CardTable.propTypes = {
  sections: PropTypes.arrayOf(
    PropTypes.shape({
      label: PropTypes.string.isRequired,
      type: PropTypes.string.isRequired,
    }).isRequired,
  ).isRequired,
  cards: PropTypes.arrayOf(
    PropTypes.shape({
      status: PropTypes.shape({
        type: PropTypes.oneOf(statusTypes).isRequired,
        label: PropTypes.string.isRequired,
      }),
      actions: PropTypes.arrayOf(
        PropTypes.shape({
          label: PropTypes.string.isRequired,
          onClick: PropTypes.func.isRequired,
        }).isRequired,
      ),
    }),
  ).isRequired,
};

CardTable.displayName = 'CardTable';

export default CardTable;
