import { useState } from "react";
import DashboardGrid from "../../../govoplan-dashboard/webui/src/features/dashboard/DashboardGrid";
import "../../../govoplan-dashboard/webui/src/styles/dashboard.css";
import Button from "../src/components/Button";
import { DocumentationHelpProvider } from "../src/components/help/DocumentationHelpLink";
import type { AuthInfo, DashboardWidgetContribution } from "../src/types";

const auth: AuthInfo = {
  user: { id: "widget-user", account_id: "widget-account", email: "widget@example.test" },
  tenant: { id: "widget-tenant", name: "Widget fixture", slug: "widget" },
  scopes: [], roles: [], groups: [], profile_loaded: true, roles_loaded: true, groups_loaded: true
};
const widget: DashboardWidgetContribution = {
  id: "fixture.scheduling",
  title: "Scheduling requests",
  documentation: { topicId: "scheduling.find-and-decide-meeting-time", documentationType: "user" },
  render: () => <p>Existing requests</p>
};
const ignore = () => undefined;

export default function WidgetHeadingHelpScenario() {
  const [configuring, setConfiguring] = useState(false);
  const [preview, setPreview] = useState(false);
  return <DocumentationHelpProvider localDocsAvailable>
    <main className="conformance-root">
      <Button onClick={() => { setConfiguring(value => !value); setPreview(false); }}>Toggle configuration</Button>
      <Button onClick={() => { setConfiguring(true); setPreview(value => !value); }}>Toggle drag preview</Button>
      <DashboardGrid
        placements={[{ instanceId: "fixture-instance", widgetId: widget.id, size: "medium", columnStart: 1, configuration: {} }]}
        widgetById={new Map([[widget.id, widget]])}
        settings={{ apiBaseUrl: "", apiKey: "", accessToken: "" }} auth={auth} modules={[]}
        effectiveView={null} refreshKey={0} configuring={configuring}
        dragItem={preview ? { kind: "placement", instanceId: "fixture-instance" } : null}
        dropTarget={preview ? { kind: "end", columnStart: 1 } : null}
        onDragStart={ignore} onDragEnd={ignore} onDragOver={ignore} onDragOverEnd={ignore}
        onDrop={ignore} onDropPreview={ignore} onDropAtEnd={ignore} onRemove={ignore} onConfigure={ignore}
      />
    </main>
  </DocumentationHelpProvider>;
}