import PropTypes from 'prop-types';
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Divider, Flex } from '@patternfly/react-core';
import { translate as __, documentLocale } from 'foremanReact/common/I18n';
import PageLayout from 'foremanReact/routes/common/PageLayout/PageLayout';
import { useAPI } from 'foremanReact/common/hooks/API/APIHooks';
import { stopInterval } from 'foremanReact/redux/middlewares/IntervalMiddleware';
import { getData, getTask } from './JobInvocationActions';
import {
  CURRENT_PERMISSIONS,
  DATE_OPTIONS,
  JOB_INVOCATION_KEY,
  STATUS,
  currentPermissionsUrl,
} from './JobInvocationConstants';
import './JobInvocationDetail.scss';
import JobInvocationOverview from './JobInvocationOverview';
import { selectItems } from './JobInvocationSelectors';
import JobInvocationSystemStatusChart from './JobInvocationSystemStatusChart';
import JobInvocationToolbarButtons from './JobInvocationToolbarButtons';

const JobInvocationDetailPage = ({
  match: {
    params: { id },
  },
}) => {
  const dispatch = useDispatch();
  const items = useSelector(selectItems);
  const {
    description,
    status_label: statusLabel,
    task,
    start_at: startAt,
  } = items;
  const finished =
    statusLabel === STATUS.FAILED ||
    statusLabel === STATUS.SUCCEEDED ||
    statusLabel === STATUS.CANCELLED;
  const autoRefresh = task?.state === STATUS.PENDING || false;
  const { response, status } = useAPI(
    'get',
    currentPermissionsUrl,
    CURRENT_PERMISSIONS
  );

  let isAlreadyStarted = false;
  let formattedStartDate;
  if (startAt) {
    // Ensures date string compatibility across browsers
    const convertedDate = new Date(startAt.replace(/[-.]/g, '/'));
    isAlreadyStarted = convertedDate.getTime() <= new Date().getTime();
    formattedStartDate = convertedDate.toLocaleString(
      documentLocale(),
      DATE_OPTIONS
    );
  }

  useEffect(() => {
    dispatch(getData(`/api/job_invocations/${id}`));
    if (finished && !autoRefresh) {
      dispatch(stopInterval(JOB_INVOCATION_KEY));
    }
    return () => {
      dispatch(stopInterval(JOB_INVOCATION_KEY));
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [dispatch, id, finished, autoRefresh]);

  useEffect(() => {
    if (task?.id !== undefined) {
      dispatch(getTask(`${task?.id}`));
    }
  }, [dispatch, task]);

  const breadcrumbOptions = {
    breadcrumbItems: [
      { caption: __('Jobs'), url: `/job_invocations` },
      { caption: description },
    ],
    isPf4: true,
  };

  return (
    <PageLayout
      header={description}
      breadcrumbOptions={breadcrumbOptions}
      toolbarButtons={
        <JobInvocationToolbarButtons
          jobId={id}
          data={items}
          currentPermissions={response.results}
          permissionsStatus={status}
        />
      }
      searchable={false}
    >
      <Flex
        className="job-invocation-detail-flex"
        alignItems={{ default: 'alignItemsFlexStart' }}
      >
        <JobInvocationSystemStatusChart
          data={items}
          isAlreadyStarted={isAlreadyStarted}
          formattedStartDate={formattedStartDate}
        />
        <Divider
          orientation={{
            default: 'vertical',
          }}
        />
        <Flex
          className="job-overview"
          alignItems={{ default: 'alignItemsCenter' }}
        >
          <JobInvocationOverview
            data={items}
            isAlreadyStarted={isAlreadyStarted}
            formattedStartDate={formattedStartDate}
          />
        </Flex>
      </Flex>
    </PageLayout>
  );
};

JobInvocationDetailPage.propTypes = {
  match: PropTypes.shape({
    params: PropTypes.shape({
      id: PropTypes.string.isRequired,
    }),
  }).isRequired,
};

export default JobInvocationDetailPage;
