// @flow
import React from 'react';
import type { ComponentType } from 'react';
import styled from 'styled-components';
import marked from 'marked';
import { withInfo } from '@storybook/addon-info';

const FullWidthTable = styled.table`
  width: 100%;

  th {
    text-align: left;
  }

  tr:nth-child(odd) {
    background: #fafafa;
  }
`;

const PropDefinitions = ({ propDefinitions }) => (
  <FullWidthTable>
    <tbody>
      <tr>
        <th>Prop</th>
        <th>Type</th>
        <th>Required</th>
      </tr>
      {propDefinitions.map(pd => (
        <tr key={pd.property}>
          <td>{pd.property}</td>
          <td>{pd.propType}</td>
          <td>{JSON.stringify(pd.required)}</td>
        </tr>
      ))}
    </tbody>
  </FullWidthTable>
);

export const withDocs = (
  docs: string,
  excludes: ComponentType<*>[] = [],
  includes: ComponentType<*>[] = [],
) =>
  withInfo({
    text: docs,
    propTables: includes,
    propTablesExclude: excludes,
    TableComponent: PropDefinitions,
    styles: {},
  });
