import { observer } from "mobx-react";
import { useState } from "react";
// buzzwareTech imports
import { EUserPermissions, EUserPermissionsLevel } from "@buzzwaretech/constants";
import { TOAST_TYPE, setToast } from "@buzzwaretech/propel/toast";
import type { IWorkspaceView } from "@buzzwaretech/types";
import { CustomMenu } from "@buzzwaretech/ui";
import { cn, copyUrlToClipboard } from "@buzzwaretech/utils";
// helpers
import { useViewMenuItems } from "@/components/common/quick-actions-helper";
// hooks
import { useUser, useUserPermissions } from "@/hooks/store/user";
// local imports
import { DeleteGlobalViewModal } from "./delete-view-modal";
import { CreateUpdateWorkspaceViewModal } from "./modal";

type Props = {
  workspaceSlug: string;
  view: IWorkspaceView;
};

export const WorkspaceViewQuickActions = observer(
  function WorkspaceViewQuickActions(props: Props) {
    const { workspaceSlug, view } = props;
    // states
    const [updateViewModal, setUpdateViewModal] = useState(false);
    const [deleteViewModal, setDeleteViewModal] = useState(false);
    // store hooks
    const { data } = useUser();
    const { allowPermissions } = useUserPermissions();
    // auth
    const isOwner = view?.owned_by === data?.id;
    const isAdmin = allowPermissions(
      [EUserPermissions.ADMIN],
      EUserPermissionsLevel.WORKSPACE,
    );

    const viewLink = `${workspaceSlug}/workspace-views/${view.id}`;
    const handleCopyText = async () => {
      await copyUrlToClipboard(viewLink);
      setToast({
        type: TOAST_TYPE.SUCCESS,
        title: "Link Copied!",
        message: "View link copied to clipboard.",
      });
    };

    const handleOpenInNewTab = () => window.open(`/${viewLink}`, "_blank");

    const MENU_ITEMS = useViewMenuItems({
      isOwner,
      isAdmin,
      handleDelete: () => setDeleteViewModal(true),
      handleEdit: () => setUpdateViewModal(true),
      handleOpenInNewTab,
      handleCopyLink: handleCopyText,
      workspaceSlug,
      view,
    });

    return (
      <>
        <CreateUpdateWorkspaceViewModal
          data={view}
          isOpen={updateViewModal}
          onClose={() => setUpdateViewModal(false)}
        />
        <DeleteGlobalViewModal
          data={view}
          isOpen={deleteViewModal}
          onClose={() => setDeleteViewModal(false)}
        />
        <CustomMenu
          ellipsis
          placement="bottom-end"
          closeOnSelect
          buttonClassName="flex-shrink-0 flex items-center justify-center size-[26px] bg-layer-1/70 rounded-sm"
        >
          {MENU_ITEMS.items.map((item) => {
            if (item.shouldRender === false) return null;
            return (
              <CustomMenu.MenuItem
                key={item.key}
                onClick={() => {
                  item.action();
                }}
                className={cn(
                  "flex items-center gap-2",
                  {
                    "text-placeholder": item.disabled,
                  },
                  item.className,
                )}
                disabled={item.disabled}
              >
                {item.icon && (
                  <item.icon className={cn("h-3 w-3", item.iconClassName)} />
                )}
                <div>
                  <h5>{item.title}</h5>
                  {item.description && (
                    <p
                      className={cn("whitespace-pre-line text-tertiary", {
                        "text-placeholder": item.disabled,
                      })}
                    >
                      {item.description}
                    </p>
                  )}
                </div>
              </CustomMenu.MenuItem>
            );
          })}
        </CustomMenu>
      </>
    );
  },
);