import React, { Fragment, useEffect } from "react";

import { useRouter } from "next/router";

import useSWR from "swr";

// react-hook-form

// headless ui
import { Tab } from "@headlessui/react";
// services
import analyticsService from "services/analytics.service";
import trackEventServices from "services/track_event.service";
// layouts
import { WorkspaceAuthorizationLayout } from "layouts/auth-layout-legacy";
// components
import { CustomAnalytics, ScopeAndDemand } from "components/analytics";
// ui
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
import { EmptyState } from "components/ui";
// icons
import { PlusIcon } from "@heroicons/react/24/outline";
// images
import emptyAnalytics from "public/empty-state/analytics.svg";
// types
import { IAnalyticsParams } from "types";
// fetch-keys
import { ANALYTICS } from "constants/fetch-keys";
import { AppLayout } from "layouts/app-layout";
import { useMobxStore } from "lib/mobx/store-provider";
import { observer } from "mobx-react-lite";
import { WorkspaceAnalyticsHeader } from "components/headers/workspace-analytics";

const tabsList = ["Scope and Demand", "Custom Analytics"];

const AnalyticsPage = observer(() => {
  // router
  const router = useRouter();
  const { workspaceSlug } = router.query;
  // store
  const { workspace: workspaceStore, project: projectStore, user: userStore } = useMobxStore();

  const user = userStore.currentUser;
  const projects = workspaceSlug ? projectStore.projects[workspaceSlug?.toString()] : null;

  // const { user } = useUserAuth();
  // const { projects } = useProjects();

  const trackAnalyticsEvent = (tab: string) => {
    const eventPayload = {
      workspaceSlug: workspaceSlug?.toString(),
    };

    const eventType =
      tab === "Scope and Demand" ? "WORKSPACE_SCOPE_AND_DEMAND_ANALYTICS" : "WORKSPACE_CUSTOM_ANALYTICS";

    trackEventServices.trackAnalyticsEvent(eventPayload, eventType, user);
  };

  useEffect(() => {
    if (!workspaceSlug) return;

    if (user && workspaceSlug)
      trackEventServices.trackAnalyticsEvent(
        { workspaceSlug: workspaceSlug?.toString() },
        "WORKSPACE_SCOPE_AND_DEMAND_ANALYTICS",
        user
      );
  }, [user, workspaceSlug]);

  return (
    // <WorkspaceAuthorizationLayout
    //   breadcrumbs={
    //     <Breadcrumbs>
    //       <BreadcrumbItem title="Workspace Analytics" />
    //     </Breadcrumbs>
    //   }
    // >
    //   {projects ? (
    //     projects.length > 0 ? (
    //       <div className="h-full flex flex-col overflow-hidden bg-custom-background-100">
    //         <Tab.Group as={Fragment}>
    //           <Tab.List as="div" className="space-x-2 border-b border-custom-border-200 px-5 py-3">
    //             {tabsList.map((tab) => (
    //               <Tab
    //                 key={tab}
    //                 className={({ selected }) =>
    //                   `rounded-3xl border border-custom-border-200 px-4 py-2 text-xs hover:bg-custom-background-80 ${
    //                     selected ? "bg-custom-background-80" : ""
    //                   }`
    //                 }
    //                 onClick={() => trackAnalyticsEvent(tab)}
    //               >
    //                 {tab}
    //               </Tab>
    //             ))}
    //           </Tab.List>
    //           <Tab.Panels as={Fragment}>
    //             <Tab.Panel as={Fragment}>
    //               <ScopeAndDemand fullScreen />
    //             </Tab.Panel>
    //             <Tab.Panel as={Fragment}>
    //               <CustomAnalytics
    //                 analytics={analytics}
    //                 analyticsError={analyticsError}
    //                 params={params}
    //                 control={control}
    //                 setValue={setValue}
    //                 user={user}
    //                 fullScreen
    //               />
    //             </Tab.Panel>
    //           </Tab.Panels>
    //         </Tab.Group>
    //       </div>
    //     ) : (
    //       <EmptyState
    //         title="You can see your all projects' analytics here"
    //         description="Let's create your first project and analyze the stats with various graphs."
    //         image={emptyAnalytics}
    //         primaryButton={{
    //           icon: <PlusIcon className="h-4 w-4" />,
    //           text: "New Project",
    //           onClick: () => {
    //             const e = new KeyboardEvent("keydown", {
    //               key: "p",
    //             });
    //             document.dispatchEvent(e);
    //           },
    //         }}
    //       />
    //     )
    //   ) : null}
    // </WorkspaceAuthorizationLayout>
    <AppLayout header={<WorkspaceAnalyticsHeader />}>
      <>
        {projects && projects.length > 0 ? (
          <>
            <div className="h-full flex flex-col overflow-hidden bg-custom-background-100">
              <Tab.Group as={Fragment}>
                <Tab.List as="div" className="space-x-2 border-b border-custom-border-200 px-5 py-3">
                  {tabsList.map((tab) => (
                    <Tab
                      key={tab}
                      className={({ selected }) =>
                        `rounded-3xl border border-custom-border-200 px-4 py-2 text-xs hover:bg-custom-background-80 ${
                          selected ? "bg-custom-background-80" : ""
                        }`
                      }
                      onClick={() => trackAnalyticsEvent(tab)}
                    >
                      {tab}
                    </Tab>
                  ))}
                </Tab.List>
                <Tab.Panels as={Fragment}>
                  <Tab.Panel as={Fragment}>
                    <ScopeAndDemand fullScreen />
                  </Tab.Panel>
                  <Tab.Panel as={Fragment}>
                    <CustomAnalytics fullScreen />
                  </Tab.Panel>
                </Tab.Panels>
              </Tab.Group>
            </div>
          </>
        ) : (
          <>
            <EmptyState
              title="You can see your all projects' analytics here"
              description="Let's create your first project and analyze the stats with various graphs."
              image={emptyAnalytics}
              primaryButton={{
                icon: <PlusIcon className="h-4 w-4" />,
                text: "New Project",
                onClick: () => {
                  const e = new KeyboardEvent("keydown", {
                    key: "p",
                  });
                  document.dispatchEvent(e);
                },
              }}
            />
          </>
        )}
      </>
    </AppLayout>
  );
});

export default AnalyticsPage;