import { ReactElement } from 'react';
import { Page } from '../../db/pages';

interface PageInfoProps {
  page: Page;
}

const PageInfo = ({ page }: PageInfoProps): ReactElement => {
  return (
    <table style={{ width: '100%', overflow: 'scroll' }}>
      <tbody>
        <tr>
          <td>URL</td>
          <td>{page.nurl.normalized}</td>
        </tr>
        <tr>
          <td>OriginalUrl</td>
          <td>{page.nurl.original}</td>
        </tr>
        <tr>
          <td>Title</td>
          <td>{page.title}</td>
        </tr>
        <tr>
          <td>Visible</td>
          <td>{page.visible}</td>
        </tr>
        <tr>
          <td>Tags</td>
          <td>{page.humanTags.join(', ')}</td>
        </tr>
        <tr>
          <td>AutoTags</td>
          <td>{page.autoTags.map((x) => x.name).join(', ')}</td>
        </tr>
        <tr>
          <td>HumanRejectedTags</td>
          <td>{page.humanRejectedTags.join(', ')}</td>
        </tr>

        <tr>
          <td>Opened</td>
          <td>{page.openedUrls.join(', ')}</td>
        </tr>
        <tr>
          <td>Opener</td>
          <td>{page.openerUrls.join(', ')}</td>
        </tr>
        <tr>
          <td>TimeAdjacent</td>
          <td>{page.timeAdjacentUrls.join(', ')}</td>
        </tr>
        <tr>
          <td>AccessTimes</td>
          <td>{page.accessTimes.join(', ')}</td>
        </tr>
        <tr>
          <td>LastAccess</td>
          <td>{-page.lastActiveDesc}</td>
        </tr>
        <tr>
          <td>Hotness</td>
          <td>{-page.hotnessDesc}</td>
        </tr>
        <tr>
          <td>DisableTagPropagation</td>
          <td>{page.disableTagPropagation}</td>
        </tr>
      </tbody>
    </table>
  );
};

export default PageInfo;