export default function JoinGroupPage() {
  const session = useUser();
  const z = useZero();
  const navigate = useNavigate();
  const params = useParams<Params>();

  const group = useQuery(() =>
    getTopLevelGroupDetailsByInviteLink(z, params.invitationId),
  );

  const guardedGroupWithMembers = useQuery(() =>
    getGroupMembersWhereUserIsAMember(
      z,
      group()?.id ?? '',
      session.user()?.id ?? '',
    ),
  );

  const isMember = () => guardedGroupWithMembers() !== undefined;

  const handleJoinGroup = () => {
    const g = group();
    const user = session.user();
    if (!g || !user || !user.username || isMember()) return;

    // TODO: fix new state flash
    void joinGroup(z, group()?.id ?? '', user.id, user.username);
    navigate(`/group/${g.id}`);
  };

  return (
    <Show when={session.user() && group()}>
      {(group) => (
        ...
          <StyledCard class="max-w-md w-full">
            <StyledCardHeader>
              <StyledCardTitle>
                <Show when={!isMember()} fallback={"Can't join "}>
                  Join{' '}
                </Show>
                '{group().title}'
              </StyledCardTitle>
              <StyledCardDescription>
                <Show
                  when={!isMember()}
                  fallback={"you're already a member of"}
                >
                  you&apos;ve been invited to join
                </Show>{' '}
                '{group().title}'
              </StyledCardDescription>
            </StyledCardHeader>
            <StyledCardContent class="flex justify-center">...</StyledCardContent>
          </StyledCard>
      )}
    </Show>
  );
}

export default function JoinGroupPage() {
  const session = useUser();
  const z = useZero();
  const navigate = useNavigate();
  const params = useParams<Params>();

  const group = useQuery(() =>
    getTopLevelGroupDetailsByInviteLink(z, params.invitationId),
  );

  const guardedGroupWithMembers = useQuery(() =>
    getGroupMembersWhereUserIsAMember(
      z,
      group()?.id ?? '',
      session.user()?.id ?? '',
    ),
  );

  const isMember = () => guardedGroupWithMembers() !== undefined;

  const handleJoinGroup = () => {
    const g = group();
    const user = session.user();
    if (!g || !user || !user.username || isMember()) return;

    // TODO: fix new state flash
    void joinGroup(z, group()?.id ?? '', user.id, user.username);
    navigate(`/group/${g.id}`);
  };

  return (
    <Show when={session.user() && group()}>
      {(group) => (
        ...
          <StyledCard class="max-w-md w-full">
            <StyledCardHeader>
              <StyledCardTitle>
                <Show when={!isMember()} fallback={"Can't join "}>
                  Join{' '}
                </Show>
                '{group().title}'
              </StyledCardTitle>
              <StyledCardDescription>
                <Show
                  when={!isMember()}
                  fallback={"you're already a member of"}
                >
                  you&apos;ve been invited to join
                </Show>{' '}
                '{group().title}'
              </StyledCardDescription>
            </StyledCardHeader>
            <StyledCardContent class="flex justify-center">...</StyledCardContent>
          </StyledCard>
      )}
    </Show>
  );
}