import React from "react";
import type { NextPage } from "next";
import { useRouter } from "next/router";
import useSWR from "swr";
import { observer } from "mobx-react-lite";
// layout
import { AppLayout } from "layouts/app-layout";
import { WorkspaceSettingLayout } from "layouts/settings-layout";
// components
import { WorkspaceSettingHeader } from "components/headers";
import { WebhookLists, EmptyWebhooks } from "components/web-hooks";
// hooks
import { useMobxStore } from "lib/mobx/store-provider";
// types
import { RootStore } from "store/root";
import { Spinner } from "@plane/ui";

const WebhooksPage: NextPage = observer(() => {
  const router = useRouter();
  const { workspaceSlug } = router.query as { workspaceSlug: string };

  const {
    webhook: { fetchWebhooks, webhooks, loader },
  }: RootStore = useMobxStore();

  useSWR(
    workspaceSlug ? `WEBHOOKS_LIST_${workspaceSlug}` : null,
    workspaceSlug ? () => fetchWebhooks(workspaceSlug) : null
  );

  return (
    <AppLayout header={<WorkspaceSettingHeader title="Webhook Settings" />}>
      <WorkspaceSettingLayout>
        <div className="w-full overflow-y-auto py-3 pr-4">
          {loader ? (
            <div className="flex h-full w-ful items-center justify-center">
              <Spinner />
            </div>
          ) : (
            <>
              {Object.keys(webhooks).length > 0 ? (
                <WebhookLists workspaceSlug={workspaceSlug} />
              ) : (
                <div className="flex justify-center w-full h-full items-center">
                  <div className="w-auto h-fit">
                    <EmptyWebhooks workspaceSlug={workspaceSlug} />
                  </div>
                </div>
              )}
            </>
          )}
        </div>
      </WorkspaceSettingLayout>
    </AppLayout>
  );
});

export default WebhooksPage;