import * as React from "react";
import { gql } from "graphql-tag";
import { useMatch, useParams } from "react-router-dom";
import {
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbSeparator,
} from "@argos-ci/app/src/components";
import { OwnerAvatar, OwnerAvatarFragment } from "../OwnerAvatar";
import { OwnerBreadcrumbMenu } from "./OwnerBreadcrumbMenu";
import { useQuery } from "../Apollo";
import { useUser } from "../User";

const OWNER_BREADCRUMB_OWNER_QUERY = gql`
  query OWNER_BREADCRUMB_OWNER_QUERY($login: String!) {
    owner(login: $login) {
      id
      login
      ...OwnerAvatarFragment
    }
  }

  ${OwnerAvatarFragment}
`;

const InnerOwnerBreadcrumbItem = ({ ownerLogin }) => {
  const user = useUser();
  const match = useMatch(`/${ownerLogin}`);
  const { data } = useQuery(OWNER_BREADCRUMB_OWNER_QUERY, {
    variables: { login: ownerLogin },
  });

  return (
    <>
      <BreadcrumbSeparator />
      <BreadcrumbItem>
        <BreadcrumbLink
          to={`/${ownerLogin}`}
          aria-current={match ? "page" : undefined}
        >
          <OwnerAvatar owner={data?.owner ?? null} size="sm" />
          {ownerLogin}
        </BreadcrumbLink>
        {user && <OwnerBreadcrumbMenu />}
      </BreadcrumbItem>
    </>
  );
};

export function OwnerBreadcrumbItem() {
  const { ownerLogin } = useParams();
  if (!ownerLogin) return null;
  return <InnerOwnerBreadcrumbItem ownerLogin={ownerLogin} />;
}

@@ -116,16 +116,64 @@
 r-dom%22;%0A
+import %7B x %7D from %22@xstyled/styled-components%22;%0A
 import %7B
@@ -173,16 +173,16 @@
 mport %7B%0A
-
   Breadc
@@ -232,16 +232,24 @@
 arator,%0A
+  Icon,%0A
 %7D from %22
@@ -271,32 +271,91 @@
 rc/components%22;%0A
+import %7B OrganizationIcon %7D from %22@primer/octicons-react%22;%0A
 import %7B OwnerAv
@@ -894,16 +894,25 @@
 t %7B data
+, loading
  %7D = use
@@ -1183,16 +1183,211 @@
       %3E%0A
+          %3Cx.div%0A            minW=%7B6%7D%0A            display=%22flex%22%0A            alignItems=%22center%22%0A            justifyContent=%22center%22%0A          %3E%0A            %7Bloading ? null : data?.owner ? (%0A    
         
@@ -1416,23 +1416,14 @@
 data
-?
 .owner
- ?? null
 %7D si
@@ -1429,24 +1429,121 @@
 ize=%22sm%22 /%3E%0A
+            ) : (%0A              %3CIcon as=%7BOrganizationIcon%7D /%3E%0A            )%7D%0A          %3C/x.div%3E%0A
           %7Bo

add owner breadcrumb default icon