import React from 'react';

import Tabs from '@alicloud/console-base-rc-tabs';
import {
  H2,
  Flex,
  Alert,
  CodeViewerTs
} from '@alicloud/demo-rc-elements';

import {
  IFixing
} from '../../../types';
import intl from '../../../intl';
import IssueTable from '../../issue-table';

interface IProps {
  fixings?: IFixing[];
}

export default function Fixings({
  fixings
}: IProps): JSX.Element {
  return fixings?.length ? <>
    <H2>{intl('title:types_amended')}</H2>
    <Tabs {...{
      tabs: fixings.map(v => ({
        key: v.propName,
        title: v.propName,
        content: <section>
          <Flex>
            <CodeViewerTs>{v.codeOld}</CodeViewerTs>
            <CodeViewerTs>{v.codeNew}</CodeViewerTs>
          </Flex>
          <IssueTable issues={v.issues} />
        </section>
      })),
      contentPadding: 'around'
    }} />
  </> : <Alert {...{
    type: fixings ? 'warning' : 'success',
    title: intl(fixings ? 'title:issues_not_written' : 'title:issues_empty')
  }}>{intl(fixings ? 'message:issues_not_written' : 'message:issues_empty')}</Alert>;
}