import { useQuery } from "@apollo/client";
import React from "react";
import { useTranslation } from "react-i18next";
import { useWindowDimensions } from "react-native";
import { SceneMap, TabView, TabBar } from "react-native-tab-view";
import { GET_JOB_BY_PK } from "../../graphql/jobs.queries";
import ErrorDisplay from "../error-display/error-display.component";
import JobDocuments from "../job-documents/job-documents.component";
import JobLines from "../job-lines/job-lines.component";
import JobNotes from "../job-notes/job-notes.component";
import JobTombstone from "../job-tombstone/job-tombstone.component";
import LoadingDisplay from "../loading-display/loading-display.component";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors";
import JobDocumentsLocalComponent from "../job-documents/job-documents-local.component";
const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
});
const mapDispatchToProps = (dispatch) => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
});
export default connect(mapStateToProps, mapDispatchToProps)(ScreenJobDetail);

export function ScreenJobDetail({ bodyshop, route }) {
  const {
    params: { jobId },
  } = route;
  const { t } = useTranslation();
  const layout = useWindowDimensions();
  const { loading, error, data, refetch } = useQuery(GET_JOB_BY_PK, {
    variables: {
      id: jobId,
    },
    skip: !jobId,
  });

  const renderTabBar = (props) => (
    <TabBar
      {...props}
      indicatorStyle={{ backgroundColor: "#ffffff" }}
      // style={{ backgroundColor: "dodgerblue" }}
    />
  );

  const renderScene = SceneMap({
    job: () =>
      JobTombstone({
        job: data.jobs_by_pk,
        loading: loading,
        refetch: refetch,
      }),
    lines: () =>
      JobLines({
        job: data.jobs_by_pk,
        loading: loading,
        refetch: refetch,
      }),

    documents: () => {
      return bodyshop.uselocalmediaserver ? (
        <JobDocumentsLocalComponent job={data.jobs_by_pk} bodyshop={bodyshop} />
      ) : (
        <JobDocuments
          job={data.jobs_by_pk}
          loading={loading}
          refetch={refetch}
        />
      );
    },

    notes: () =>
      JobNotes({
        job: data.jobs_by_pk,
        loading: loading,
        refetch: refetch,
      }),
  });

  const [index, setIndex] = React.useState(0);
  const [routes] = React.useState([
    { key: "job", title: t("jobdetail.labels.job") },
    { key: "lines", title: t("jobdetail.labels.lines") },
    { key: "documents", title: t("jobdetail.labels.documents") },
    { key: "notes", title: t("jobdetail.labels.notes") },
  ]);

  if (loading) return <LoadingDisplay />;
  if (error) return <ErrorDisplay errorMessage={error.message} />;

  return (
    <TabView
      style={{ flex: 1 }}
      navigationState={{ index, routes }}
      renderScene={renderScene}
      onIndexChange={setIndex}
      initialLayout={{ width: layout.width }}
      renderTabBar={renderTabBar}
    />
  );
}