import { useLocal } from "lib/utils/use-local";
import * as SheetPrimitive from "@radix-ui/react-dialog";
import { X } from "lucide-react";
import { FC, useEffect } from "react";
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetOverlay,
  SheetTitle,
  SheetTrigger,
} from "lib/comps/ui/sheet";

export const SheetCn: FC<{
  child: any;
  PassProp: any;
  props: any;
  content: any;
  header: string;
  open: string;
  close?: string;
  mode?: "full" | "normal";
  direction?: "left" | "right" | "bottom" | "top";
  deps?: any;
}> = ({
  child,
  PassProp,
  props,
  content,
  header,
  open,
  close,
  mode,
  direction,
  deps
}) => {
  const local = useLocal({
    open: false,
  });
  useEffect(() => {
    if (isEditor) {
      let op = open === "y" ? true : false;
      if (local.open !== op) {
        local.open = op;
        local.render();
      }
    }
  }, [open]);
  return (
    <Sheet open={local.open}>
      <SheetTrigger asChild>
        <div {...props} className={cx(props.className, "")}>
          <PassProp
            sheet={{
              deps,
              open: () => {
                local.open = true;
                local.render();
                setTimeout(() => {
                  document.body.style.pointerEvents = "auto";
                }, 1000);
              },
              close: () => {
                local.open = false;
                local.render();
              },
            }}
          >
            {child}
          </PassProp>
        </div>
      </SheetTrigger>
      <SheetOverlay
        onClick={() => {
          local.open = false;
          local.render();
        }}
        className={cx(
          "",
          css`
            background-color: #00000038 !important;
            z-index: 1;
          `
        )}
      />
      <SheetContent
        side={direction}
        className={cx(
          mode === "full" ? "c-w-screen" : "sm:s-max-w-[425px]",
          css`
            z-index: 2;
          `
        )}
      >
        {close !== "n" ? (
          <SheetPrimitive.Close
            onClick={() => {
              local.open = false;
              local.render();
            }}
            className={cx(
              "c-absolute c-right-4 c-top-4 c-rounded-sm c-opacity-70 c-ring-offset-background c-transition-opacity hover:c-opacity-100 focus:c-outline-none focus:c-ring-2 focus:c-ring-ring focus:c-ring-offset-2 disabled:c-pointer-events-none data-[state=open]:c-bg-accent data-[state=open]:c-text-muted-foreground",
              css`
                right: 1rem;
                z-index: 99;
              `
            )}
          >
            <X className="c-h-4 c-w-4" />
            <span className="c-sr-only">Close</span>
          </SheetPrimitive.Close>
        ) : (
          <></>
        )}
        {header !== "" && header ? (
          <SheetHeader
            className={cx(
              css`
                padding: 0px 0px 0px 10px;
              `
            )}
          >
            <SheetTitle>{header}</SheetTitle>
          </SheetHeader>
        ) : (
          <>
           <SheetHeader
            className={cx(
              css`
                padding: 0px;
              `
            )}
          >
            <SheetTitle></SheetTitle>
          </SheetHeader></>
        )}

        <PassProp
          sheet={{
            deps,
            open: () => {
              local.open = true;
              local.render();
              setTimeout(() => {
                document.body.style.pointerEvents = "auto";
              }, 1000);
            },
            close: () => {
              local.open = false;
              local.render();
            },
          }}
        >
          {content}
        </PassProp>
      </SheetContent>
    </Sheet>
  );
};