"use client";
/*
 * Documentation:
 * Dialog Fullscreen — https://app.subframe.com/f023064a5ca0/library?component=Dialog+Fullscreen_3f094173-71de-4378-a09a-05c482f7a137
 * Icon Button — https://app.subframe.com/f023064a5ca0/library?component=Icon+Button_af9405b1-8c54-4e01-9786-5aad308224f6
 */

import React from "react";
import { FeatherX } from "@subframe/core";
import * as SubframeCore from "@subframe/core";
import * as SubframeUtils from "../../utils";
import { IconButton } from "../IconButton";

export interface DialogFullscreenRootProps
  extends React.ComponentProps<typeof SubframeCore.FullScreenDialog.Root> {
  children?: React.ReactNode;
  padding?: "default" | "spacious";
  hideCloseIcon?: boolean;
  open?: boolean;
  onOpenChange?: (open: boolean) => void;
  className?: string;
}

const DialogFullscreenRoot = React.forwardRef<
  HTMLDivElement,
  DialogFullscreenRootProps
>(function DialogFullscreenRoot(
  {
    children,
    padding = "default",
    hideCloseIcon = false,
    className,
    ...otherProps
  }: DialogFullscreenRootProps,
  ref
) {
  return (
    <SubframeCore.FullScreenDialog.Root asChild={true} {...otherProps}>
      <div
        className={SubframeUtils.twClassNames(
          "group/3f094173 flex h-full w-full flex-col items-center justify-center bg-surface-neutral-overlay px-6 py-6 mobile:px-4 mobile:py-4",
          className
        )}
        ref={ref}
      >
        <div
          className={SubframeUtils.twClassNames(
            "flex w-full grow shrink-0 basis-0 flex-col items-start overflow-hidden rounded-lg border border-solid border-border-default bg-surface-neutral-secondary shadow-lg group/dialogfs max-w-[2512px] relative",
            { "hide-close-icon": hideCloseIcon }
          )}
        >
          {children ? (
            <div
              className={SubframeUtils.twClassNames(
                "flex w-full grow shrink-0 basis-0 flex-col items-start gap-4 px-4 py-4 overflow-auto",
                { "px-8 py-8": padding === "spacious" }
              )}
            >
              {children}
            </div>
          ) : null}
          <IconButton
            className="group-[.hide-close-icon]/dialogfs:hidden absolute right-4 top-4"
            variant="ghost"
            size="small"
            icon={<FeatherX />}
          />
        </div>
      </div>
    </SubframeCore.FullScreenDialog.Root>
  );
});

export const DialogFullscreen = DialogFullscreenRoot;