import * as React from 'react';
import styled from 'styled-components';

import { Sizes, Colors } from '../index';

interface IProps {
  data?: Object[];
  defaultHeader?: boolean;
  headers?: any[];
  children: any;
  isActive?: boolean;
}

const DataTableWrapper = styled.div<{columns: number|undefined}>`
  max-height: 367px;
  overflow-y: scroll;
  margin-bottom: 25px;
  display: grid;
  grid-column-end: span ${({ columns }) => columns };
  grid-template-columns: repeat(${({ columns }) => columns }, auto);
`;

const TableLine = styled.div<{isActive?: boolean; onClick?: any}>`
  border-bottom: 1px solid ${Colors.line};
  margin-bottom: 10px;
  padding-bottom: 10px;
  padding-left: 16px;
`;

const Sticked = styled.div`
  background-color: white;
  position: sticky;
  top: 0;
  margin-bottom: 10px;
  font-size: ${Sizes.s2}px;
  padding-bottom: ${Sizes.s1}px;
  padding-left: ${Sizes.s3}px;
  border-bottom: 1px solid ${Colors.line};
  width: 100%;
`;

export default class DataTable extends React.PureComponent<IProps> {
  render () {
    const { children, headers } = this.props;

    const mappedChildrens = React.Children.map(
      children, child => React.Children
        .map(child.props.children, component => <TableLine>{component}</TableLine>)
    );

    return (
      <React.Fragment>
        <DataTableWrapper columns={headers && headers.length}>
          {headers && headers.map(header=> <Sticked>{header}</Sticked>)}
          {mappedChildrens}
        </DataTableWrapper>
      </React.Fragment>
    );
  }
}