import React from 'react';

import { LoadingSpinner } from '@growi/ui/dist/components';

import AdminHomeContainer from '~/client/services/AdminHomeContainer';

import { withUnstatedContainers } from '../../UnstatedUtils';


type Props = {
  adminHomeContainer: AdminHomeContainer,
}

const SystemInformationTable = (props: Props) => {
  const { adminHomeContainer } = props;

  const {
    growiVersion, nodeVersion, npmVersion, pnpmVersion,
  } = adminHomeContainer.state;

  if (growiVersion == null || nodeVersion == null || npmVersion == null || pnpmVersion == null) {
    return <LoadingSpinner />;
  }

  return (
    <table data-testid="admin-system-information-table" className="table table-bordered">
      <tbody>
        <tr>
          <th>GROWI</th>
          <td data-vrt-blackout>{ growiVersion }</td>
        </tr>
        <tr>
          <th>node.js</th>
          <td>{ nodeVersion }</td>
        </tr>
        <tr>
          <th>npm</th>
          <td>{ npmVersion }</td>
        </tr>
        <tr>
          <th>pnpm</th>
          <td>{ pnpmVersion }</td>
        </tr>
      </tbody>
    </table>
  );

};

/**
 * Wrapper component for using unstated
 */
const SystemInformationTableWrapper = withUnstatedContainers(SystemInformationTable, [AdminHomeContainer]);

export default SystemInformationTableWrapper;