import type { GenerateSettings } from "@editor/tools";
import type { AppStore } from "@editor/store";
import type { GenerationResourcesState } from "@editor/state";
import { GenerateControls } from "./bottom-controls/GenerateControls";

export type GenerateSheetProps = {
  settings: GenerateSettings;
  resources: GenerationResourcesState;
  open: boolean;
  dispatch: AppStore["dispatch"];
};

export function GenerateSheet({ settings, resources, open, dispatch }: GenerateSheetProps) {
  return (
    <aside
      id="generate-sheet"
      aria-hidden={!open}
      aria-label="Generate settings"
      className={`app-surface pointer-events-auto absolute bottom-3 right-3 top-[4.5rem] z-20 flex w-[22rem] max-w-[calc(100vw-1.5rem)] flex-col overflow-hidden rounded-xl px-3 text-sm text-white transition-all duration-200 ${
        open ? "translate-x-0 opacity-100" : "pointer-events-none translate-x-8 opacity-0"
      }`}
    >
      {open ? (
        <div className="subtle-scrollbar min-h-0 flex-1 overflow-auto py-4">
          <GenerateControls settings={settings} resources={resources} dispatch={dispatch} />
        </div>
      ) : null}
    </aside>
  );
}