import React from 'react';
import PropTypes from 'prop-types';
import { translate as __ } from 'foremanReact/common/I18n';
import { usePaginationOptions } from 'foremanReact/components/Pagination/PaginationHooks';

import RelativeDateTime from 'foremanReact/components/common/dates/RelativeDateTime';

import {
  TableComposable,
  Thead,
  Tbody,
  Tr,
  Th,
  Td,
} from '@patternfly/react-table';
import { Flex, FlexItem, Pagination } from '@patternfly/react-core';

import { decodeId } from '../../../../globalIdHelper';
import withLoading from '../../../withLoading';
<<<<<<< HEAD
import { readableCron } from './JobsTabHelper';
import {
  preparePerPageOptions,
  refreshPage,
} from '../../../../helpers/paginationHelper';
=======
import { readableCron, readablePurpose } from './JobsTabHelper';
>>>>>>> 5b01704 (Fixes #34458 - Show Hostgroup jobs on the Host Detail page)

const PreviousJobsTable = ({ history, totalCount, jobs, pagination }) => {
  const columns = [
    __('Description'),
    __('Result'),
    __('State'),
    __('Executed at'),
    __('Schedule'),
  ];

  const handlePerPageSelected = (event, perPage) => {
    refreshPage(history, { page: 1, perPage });
  };

  const handlePageSelected = (event, page) => {
    refreshPage(history, { ...pagination, page });
  };

  const perPageOptions = preparePerPageOptions(usePaginationOptions());

  return (
    <React.Fragment>
      <h3>{__('Previously executed jobs')}</h3>
<<<<<<< HEAD
      <Flex className="pf-u-pt-md">
=======
      <Flex direction={{ default: 'column' }} className="pf-u-pt-md">
        <FlexItem align={{ default: 'alignRight' }}>
          <Pagination updateParamsByUrl itemCount={totalCount} variant="top" />
        </FlexItem>
        <FlexItem>
          <TableComposable variant="compact">
            <Thead>
              <Tr>
                {columns.map(col => (
                  <Th key={col}>{col}</Th>
                ))}
              </Tr>
            </Thead>
            <Tbody>
              {jobs.map(job => (
                <Tr key={job.id}>
                  <Td>
                    <a
                      onClick={() =>
                        window.tfm.nav.pushUrl(
                          `/job_invocations/${decodeId(job.id)}`
                        )
                      }
                    >
                      {job.description}
                    </a>
                    &nbsp;
                    {readablePurpose(job.recurringLogic.purpose)}
                  </Td>
                  <Td>{job.task.result}</Td>
                  <Td>{job.task.state}</Td>
                  <Td>
                    <RelativeDateTime date={job.startAt} />
                  </Td>
                  <Td>{readableCron(job.recurringLogic.cronLine)}</Td>
                </Tr>
              ))}
            </Tbody>
          </TableComposable>
        </FlexItem>
>>>>>>> 5b01704 (Fixes #34458 - Show Hostgroup jobs on the Host Detail page)
        <FlexItem align={{ default: 'alignRight' }}>
          <Pagination
            itemCount={totalCount}
            page={pagination.page}
            perPage={pagination.perPage}
            onSetPage={handlePageSelected}
            onPerPageSelect={handlePerPageSelected}
            perPageOptions={perPageOptions}
            variant="top"
          />
        </FlexItem>
      </Flex>
      <TableComposable variant="compact">
        <Thead>
          <Tr>
            {columns.map(col => (
              <Th key={col}>{col}</Th>
            ))}
          </Tr>
        </Thead>
        <Tbody>
          {jobs.map(job => (
            <Tr key={job.id}>
              <Td>
                <a
                  onClick={() =>
                    window.tfm.nav.pushUrl(
                      `/job_invocations/${decodeId(job.id)}`
                    )
                  }
                >
                  {job.description}
                </a>
              </Td>
              <Td>{job.task.result}</Td>
              <Td>{job.task.state}</Td>
              <Td>
                <RelativeDateTime date={job.startAt} />
              </Td>
              <Td>{readableCron(job.recurringLogic.cronLine)}</Td>
            </Tr>
          ))}
        </Tbody>
      </TableComposable>
    </React.Fragment>
  );
};

PreviousJobsTable.propTypes = {
  jobs: PropTypes.array.isRequired,
  history: PropTypes.object.isRequired,
  totalCount: PropTypes.number.isRequired,
  pagination: PropTypes.object.isRequired,
};

export default withLoading(PreviousJobsTable);