// Copyright (c) Meta Platforms, Inc. and affiliates.
// SCRATCH — review evidence for #3890, not part of the PR.

import type {Meta, StoryObj} from '@storybook/react';
import {useState} from 'react';
import {
  SideNav,
  SideNavCollapseButton,
  SideNavItem,
  SideNavSection,
} from '@astryxdesign/core';

const meta: Meta<typeof SideNav> = {
  title: 'Scratch/SideNav3890',
  component: SideNav,
};
export default meta;
type Story = StoryObj<typeof SideNav>;

function Nav({
  collapsible,
  label,
}: {
  collapsible: Record<string, unknown>;
  label: string;
}) {
  return (
    <SideNav collapsible={collapsible as never}>
      <SideNavSection title={label}>
        <SideNavItem label={`${label} Home`} href="/" />
        <SideNavItem label={`${label} Projects`} href="/p" />
      </SideNavSection>
    </SideNav>
  );
}

// A hidden-collapse nav whose ONLY control is a plain button — no
// SideNavCollapseButton anywhere, so nothing registers in the toggle registry.
function NoRegisteredToggle() {
  const [isCollapsed, setIsCollapsed] = useState(false);
  return (
    <div style={{display: 'flex', flexDirection: 'column', height: 400}}>
      <button
        type="button"
        data-testid="plain-toggle"
        onClick={() => setIsCollapsed(c => !c)}>
        plain toggle
      </button>
      <div style={{display: 'flex', flex: 1}}>
        <Nav
          label="A"
          collapsible={{
            isCollapsed,
            onCollapsedChange: setIsCollapsed,
            hasButton: false,
            collapsedWidth: 0,
            isAnimated: true,
          }}
        />
        <div style={{flex: 1, padding: 8}}>content</div>
      </div>
    </div>
  );
}

export const NoOutsideToggle: Story = {render: () => <NoRegisteredToggle />};

// The built-in toggle with collapsedWidth: 0 — the default `hasButton`.
function BuiltInButtonOnly() {
  const [isCollapsed, setIsCollapsed] = useState(false);
  return (
    <div style={{display: 'flex', height: 400}}>
      <Nav
        label="B"
        collapsible={{
          isCollapsed,
          onCollapsedChange: setIsCollapsed,
          collapsedWidth: 0,
        }}
      />
      <div style={{flex: 1, padding: 8}}>content</div>
    </div>
  );
}

export const BuiltInButton: Story = {render: () => <BuiltInButtonOnly />};

// Two hidden-collapse navs, each with its own outside toggle. The registry is
// module-global and unkeyed, so which toggle nav B parks focus on is the test.
function TwoNavs() {
  const [aCollapsed, setACollapsed] = useState(false);
  const [bCollapsed, setBCollapsed] = useState(false);
  const a = {isCollapsed: aCollapsed, onCollapsedChange: setACollapsed};
  const b = {isCollapsed: bCollapsed, onCollapsedChange: setBCollapsed};
  return (
    <div style={{display: 'flex', flexDirection: 'column', height: 400}}>
      <div style={{display: 'flex', gap: 8, padding: 8}}>
        <SideNavCollapseButton
          collapsible={a}
          label="toggle A"
          data-testid="toggle-a"
        />
        <SideNavCollapseButton
          collapsible={b}
          label="toggle B"
          data-testid="toggle-b"
        />
      </div>
      <div style={{display: 'flex', flex: 1}}>
        <Nav
          label="A"
          collapsible={{...a, hasButton: false, collapsedWidth: 0, isAnimated: true}}
        />
        <Nav
          label="B"
          collapsible={{...b, hasButton: false, collapsedWidth: 0, isAnimated: true}}
        />
        <div style={{flex: 1, padding: 8}}>content</div>
      </div>
    </div>
  );
}

export const TwoNavsShared: Story = {render: () => <TwoNavs />};