import React from "react";
import { componentFromStream, graphqlObservable } from "@dcos/data-service";
import { getContext } from "recompose";
import { routerShape } from "react-router";
import { of, combineLatest, BehaviorSubject } from "rxjs";
import gql from "graphql-tag";
import {
  switchMap,
  map,
  distinctUntilChanged,
  catchError,
  startWith
} from "rxjs/operators";
import { default as schema } from "#PLUGINS/jobs/src/js/data/JobModel";
import Loader from "#SRC/js/components/Loader";
import Page from "#SRC/js/components/Page";
import RequestErrorMsg from "#SRC/js/components/RequestErrorMsg";
import JobDetailPage from "./pages/JobDetailPage";

export const DIALOGS = {
  EDIT: "edit",
  DESTROY: "destroy"
};

const LoadingScreen = function() {
  return (
    <Page>
      <Page.Header breadcrumbs={[]} />
      <Loader />
    </Page>
  );
};

const ErrorScreen = function() {
  return (
    <Page>
      <Page.Header breadcrumbs={[]} />
      <RequestErrorMsg />
    </Page>
  );
};

const disabledDialog$ = new BehaviorSubject(null);
const disableDialog = () => {
  disabledDialog$.next(DIALOGS.DESTROY);
};

const jobActionDialog$ = new BehaviorSubject(null);

const handleDestroyButtonClick = () => {
  jobActionDialog$.next(DIALOGS.DESTROY);
};

const handleEditButtonClick = () => {
  jobActionDialog$.next(DIALOGS.EDIT);
};

const closeDialog = () => {
  jobActionDialog$.next(null);
  disabledDialog$.next(null);
};

const getGraphQL = id =>
  graphqlObservable(
    gql`
      query {
        job(id: $id) {
          id
          name
          path
          command
          schedules
          cpus
          description
          mem
          docker
          disk
          labels
          jobRuns
          json
        }
      }
    `,
    schema,
    { id }
  );

export default getContext({
  router: routerShape
})(
  componentFromStream(props$ => {
    const id$ = props$.pipe(
      map(props => props.params.id),
      distinctUntilChanged()
    );
    const job$ = id$.pipe(
      switchMap(id => getGraphQL(id)),
      map(({ data: { job } }) => job)
    );

    return combineLatest([
      job$,
      props$,
      jobActionDialog$,
      disabledDialog$
    ]).pipe(
      map(([job, { router, ...props }, jobActionDialog, disabledDialog]) => {
        function onJobDeleteSuccess() {
          router.push("/jobs");
          closeDialog();
        }

        return (
          <JobDetailPage
            {...props}
            job={job}
            jobActionDialog={jobActionDialog}
            disabledDialog={disabledDialog}
            errorMsg={null}
            handleDestroyButtonClick={handleDestroyButtonClick}
            handleEditButtonClick={handleEditButtonClick}
            onJobDeleteSuccess={onJobDeleteSuccess}
            closeDialog={closeDialog}
            disableDialog={disableDialog}
          />
        );
      }),
      catchError(() => of(<ErrorScreen />)),
      startWith(<LoadingScreen />)
    );
  })
);

@@ -52,27 +52,8 @@
 ream
-, graphqlObservable
  %7D f
@@ -74,24 +74,24 @@
 a-service%22;%0A
+
 import %7B get
@@ -369,68 +369,99 @@
 t %7B 
-default as schema %7D from %22#PLUGINS/jobs/src/js/data/JobModel
+DataLayerType %7D from %22@extension-kid/data-layer%22;%0A%0Aimport container from %22#SRC/js/container
 %22;%0Ai
@@ -669,16 +669,65 @@
 Page%22;%0A%0A
+const dataLayer = container.get(DataLayerType);%0A%0A
 export c
@@ -1530,25 +1530,23 @@
 %3E%0A  
-graphqlObservable
+dataLayer.query
 (%0A  
@@ -1825,27 +1825,15 @@
   %7D%0A
+
     %60,%0A
-    schema,%0A
     

move to data layer for detail page