import type { ImageDocument } from "@core/document";
import type { SelectionState, ViewportState } from "@editor/state";
import type { GenerateSettings } from "@editor/tools";
import type { AppStore } from "@editor/store";
import { GenerateControls } from "./bottom-controls/GenerateControls";

export type GenerateSheetProps = {
  document: ImageDocument;
  selection: SelectionState;
  viewport: ViewportState;
  settings: GenerateSettings;
  open: boolean;
  onOpenChange: (open: boolean) => void;
  dispatch: AppStore["dispatch"];
};

export function GenerateSheet({ document, selection, viewport, settings, open, onOpenChange, dispatch }: GenerateSheetProps) {
  return (
    <aside
      aria-hidden={!open}
      aria-label="Generate settings"
      className={`pointer-events-auto absolute bottom-6 right-4 top-24 z-20 flex w-[28rem] max-w-[calc(100vw-2rem)] flex-col overflow-hidden rounded-[2.5rem] px-4 text-sm text-white backdrop-blur-xl transition-all duration-200 ${
        open ? "translate-x-0 opacity-100" : "pointer-events-none translate-x-8 opacity-0"
      }`}
    >
      <div className="subtle-scrollbar min-h-0 flex-1 overflow-auto py-4">
        <GenerateControls document={document} selection={selection} viewport={viewport} settings={settings} dispatch={dispatch} />
      </div>
    </aside>
  );
}