import React from 'react';
import PropTypes from 'prop-types';

import { withTranslation } from 'react-i18next';
import { pagePathUtils } from '@growi/core';


const { convertToNewAffiliationPath } = pagePathUtils;

function ComparePathsTable(props) {
  const {
    path, subordinatedPages, newPagePath, t,
  } = props;

  return (
    <table className="table table-bordered grw-compare-paths-table">
      <thead>
        <tr className="d-flex">
          <th className="w-50">{t('original_path')}</th>
          <th className="w-50">{t('new_path')}</th>
        </tr>
      </thead>
      <tbody className="overflow-auto d-block">
        {subordinatedPages.map((subordinatedPage) => {
          const convertedPath = convertToNewAffiliationPath(path, newPagePath, subordinatedPage.path);
          return (
            <tr key={subordinatedPage._id} className="d-flex">
              <td className="text-break w-50">
                <a href={subordinatedPage.path}>
                  {subordinatedPage.path}
                </a>
              </td>
              <td className="text-break w-50">
                {convertedPath}
              </td>
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}


ComparePathsTable.propTypes = {
  t: PropTypes.func.isRequired, //  i18next

  path: PropTypes.string.isRequired,
  subordinatedPages: PropTypes.array.isRequired,
  newPagePath: PropTypes.string.isRequired,
};


export default withTranslation()(ComparePathsTable);