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

import {
  TableColumnProps,
  Table,
  HtmlText
} from '@alicloud/demo-rc-elements';

import {
  IIssue
} from '../../types';
import intl from '../../intl';

import CellType from './cell-type';
import CellError from './cell-error';
import CellConsequences from './cell-consequences';

interface IProps {
  issues: IIssue[];
}

const ScTable = styled(Table)`
  pre {
    margin: 0;
  }
` as typeof Table;

const COLUMNS: TableColumnProps<IIssue>[] = [{
  title: 'Title',
  renderCell: (o: IIssue): JSX.Element => <HtmlText text={o.title} />
}, {
  title: intl('issue:col:code'),
  dataIndex: 'code',
  renderCell: (o: IIssue): JSX.Element => <pre>{o.code}</pre>
}, {
  width: 100,
  title: intl('issue:col:type'),
  renderCell: (o: IIssue): JSX.Element => <CellType o={o} />
}, {
  title: intl('issue:col:errors'),
  renderCell: (o: IIssue): JSX.Element => <CellError o={o} />
}, {
  width: 160,
  title: intl('issue:col:consequences'),
  renderCell: (o: IIssue): JSX.Element => <CellConsequences o={o} />
}];

export default function IssueTable({
  issues
}: IProps): JSX.Element {
  return <ScTable {...{
    dataSource: issues,
    columns: COLUMNS
  }} />;
}