import { useState } from "react";
import Button from "../src/components/Button";
import Card from "../src/components/Card";
import Dialog from "../src/components/Dialog";
import PageLayout from "../src/components/PageLayout";
import PageActionBar from "../src/components/PageActionBar";
import WorkspaceActionBar from "../src/components/WorkspaceActionBar";
import DocumentationHelpLink, { DocumentationHelpProvider } from "../src/components/help/DocumentationHelpLink";
import TextWithHelp from "../src/components/help/TextWithHelp";
import WidgetHeadingHelpScenario from "./WidgetHeadingHelpScenario";

export default function HeadingHelpScenario() {
  const [open, setOpen] = useState(false);
  const [loading, setLoading] = useState(true);
  if (new URLSearchParams(location.search).has("widgets")) return <WidgetHeadingHelpScenario />;
  const help = <DocumentationHelpLink reference={{ contextId: "dashboard" }} />;
  const longTitle = `Dashboard ${"DokumentationsüberschriftOhneLeerzeichen".repeat(5)}`;
  return <DocumentationHelpProvider localDocsAvailable={false}>
    <main className="conformance-root">
      <PageLayout archetype="overview" mode="embedded" title="Dashboard" titleHelp={help} headerLoading={loading}
        actions={<PageActionBar variant="overview" primaryActions={<Button onClick={() => setLoading(value => !value)}>Toggle loading</Button>} />}>
        <WorkspaceActionBar variant="workspace" title="Workspace" titleHelp={help} primaryActions={<Button>Refresh</Button>} />
        <Card title={longTitle} titleHelp={help} collapsible persistCollapse={false} data-testid="help-card">
          <p data-testid="help-card-content">Saved data</p>
        </Card>
        <TextWithHelp as="div" help={help}><h3>Section</h3></TextWithHelp>
        <div style={{ width: 120 }} data-testid="raw-text-help">
          <TextWithHelp help={help}>{"UnbrokenLabel".repeat(8)}</TextWithHelp>
        </div>
        <Button data-testid="open-help-dialog" onClick={() => setOpen(true)}>Edit settings</Button>
        <Dialog open={open} title={longTitle} titleHelp={help} onClose={() => setOpen(false)}
          footer={<Button data-testid="dialog-last-action">Save</Button>}>
          <label>Value<input defaultValue="Saved value" /></label>
        </Dialog>
      </PageLayout>
    </main>
  </DocumentationHelpProvider>;
}