import { observer } from "mobx-react";
import { useTheme } from "next-themes";
import Link from "next/link";
// buzzwareTech imports
import { PROJECT_TRACKER_ELEMENTS } from "@buzzwaretech/constants";
import { Button, getButtonStyling } from "@buzzwaretech/propel/button";
import { cn } from "@buzzwaretech/utils";
// assets
import ProjectDarkEmptyState from "@/app/assets/empty-state/project-settings/no-projects-dark.png?url";
import ProjectLightEmptyState from "@/app/assets/empty-state/project-settings/no-projects-light.png?url";
// hooks
import { useCommandPalette } from "@/hooks/store/use-command-palette";

function ProjectSettingsPage() {
  // store hooks
  const { resolvedTheme } = useTheme();
  const { toggleCreateProjectModal } = useCommandPalette();
  // derived values
  const resolvedPath =
    resolvedTheme === "dark" ? ProjectDarkEmptyState : ProjectLightEmptyState;
  return (
    <div className="mx-auto flex h-full max-w-[480px] flex-col items-center justify-center gap-4">
      <img src={resolvedPath} alt="No projects yet" />
      <div className="text-16 font-semibold text-tertiary">No projects yet</div>
      <div className="text-center text-13 text-tertiary">
        Projects act as the foundation for goal-driven work. They let you manage
        your teams, tasks, and everything you need to get things done.
      </div>
      <div className="flex gap-2">
        <Link
          href="https://buzzwareTech.so/"
          target="_blank"
          className={cn(getButtonStyling("secondary", "base"))}
        >
          Learn more about projects
        </Link>
        <Button
          onClick={() => toggleCreateProjectModal(true)}
          data-ph-element={
            PROJECT_TRACKER_ELEMENTS.EMPTY_STATE_CREATE_PROJECT_BUTTON
          }
        >
          Start your first project
        </Button>
      </div>
    </div>
  );
}

export default observer(ProjectSettingsPage);