import React from "react";
import OwnersDetailComponent from "./owners-detail.page.component";
import { useTranslation } from "react-i18next";
import { useQuery } from "react-apollo";
import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
import AlertComponent from "../../components/alert/alert.component";
import { QUERY_OWNER_BY_ID } from "../../graphql/owners.queries";
export default function OwnersDetailContainer({ match }) {
  const { ownerId } = match.params;
  const { t } = useTranslation();

  const { loading, data, error, refetch } = useQuery(QUERY_OWNER_BY_ID, {
    variables: { id: ownerId },
    fetchPolicy: "network-only"
  });

  if (loading) return <LoadingSpinner />;
  if (error) return <AlertComponent message={error.message} type="error" />;

  if (data.owners_by_pk)
    return (
      <OwnersDetailComponent owner={data.owners_by_pk} refetch={refetch} />
    );
  else
    return (
      <AlertComponent message={t("owners.errors.noaccess")} type="error" />
    );
}
