SplitView

type SplitViewStoryArgs = { maxHorizontal: number; maxVertical: number };

import { useCallback, useState } from 'react';
import { SplitView, applyItemPlacement, getDropPanelId, useSplitViewItemIds, type PanelLayout, type SplitViewDropEvent } from '@mildang/design-system/unofficial/SplitView';
import { css } from '@mildang/styled-system/css';

interface Item {
  id: string;
  title: string;
  panelId: string;
}

let counter = 0;

const nextId = (prefix: string) => `${prefix}${++counter}`;

const navItems: Item[] = [
  { id: 'nav-a-1', title: '아이템 1', panelId: '' },
  { id: 'nav-a-2', title: '아이템 2', panelId: '' },
  { id: 'nav-a-3', title: '아이템 3', panelId: '' },
  { id: 'nav-a-4', title: '아이템 4', panelId: '' },
  { id: 'nav-a-5', title: '아이템 5', panelId: '' },
];

const STORY_DEFAULT_ARGS = { ...({ maxHorizontal: 3, maxVertical: 2 }), ...({}) } as SplitViewStoryArgs;

const SplitViewDefaultExampleRender = function Render(args: SplitViewStoryArgs) {
    const [layout, setLayout] = useState<PanelLayout>({ id: 'root', type: 'panel', panelId: 'p0' });
    const [items, setItems] = useState<Item[]>([]);
    const [activePanelId, setActivePanelId] = useState('p0');

    function PanelContent({ panelId, isActivePanel }: { panelId: string; isActivePanel: boolean }) {
      const itemIds = useSplitViewItemIds(panelId);
      const panelItems = itemIds
        .map((id) => items.find((it) => it.id === id))
        .filter((it): it is Item => it != null);

      return (
        <SplitView.Panel onActivate={() => setActivePanelId(panelId)}>
          <SplitView.TabBar
            panelId={panelId}
            className={css({ display: 'flex', minH: '24', bg: 'neutral.surface.high', '&[data-drop-target]': { bg: 'neutral.surface.highest' } })}
          >
            {panelItems.map((item) => (
              <SplitView.Item
                key={item.id}
                id={item.id}
                panelId={panelId}
                data={item}
                className={css({ display: 'flex', gap: '4', alignItems: 'center', bg: 'neutral.surface.highest', p: '6' })}
              >
                <span>{item.title}</span>
                <button
                  type="button"
                  onClick={() => setItems((prev) => prev.filter((it) => it.id !== item.id))}
                >
                  ✕
                </button>
              </SplitView.Item>
            ))}
          </SplitView.TabBar>
          <div className={css({ p: '16', flex: 1 })}>{isActivePanel && <span>active</span>}</div>
        </SplitView.Panel>
      );
    }

    const handleDrop = useCallback((event: SplitViewDropEvent<Item>) => {
      const { source, target, placementByPanel, nextLayout } = event;
      const destinationPanelId = getDropPanelId(target);
      if (!destinationPanelId) return;

      const committedLayout = nextLayout ?? layout;
      if (nextLayout) setLayout(nextLayout);

      setItems((prev) => {
        const existing = prev.find((it) => it.id === source.id);
        const effectiveId = existing ? existing.id : nextId('item-');
        const itemsWithNew = existing
          ? prev
          : [...prev, { ...source.data, id: effectiveId, panelId: destinationPanelId }];

        return applyItemPlacement({
          items: itemsWithNew,
          layout: committedLayout,
          itemIdsByPanel: placementByPanel,
        });
      });

      setActivePanelId(destinationPanelId);
    }, [layout]);

    return (
      <SplitView.DndProvider
        items={items}
        layout={layout}
        onDrop={handleDrop}
        maxHorizontal={args.maxHorizontal}
        maxVertical={args.maxVertical}
      >
        <div className={css({ display: 'flex', height: '100vh' })}>
          <aside className={css({ width: '150px', p: '12', display: 'flex', flexDirection: 'column', gap: '8' })}>
            <div>드래그 가능 요소</div>
            {navItems.map((item) => (
              <SplitView.DragSource
                key={item.id}
                id={item.id}
                data={item}
                className={css({ px: '10', py: '6', bg: 'neutral.surface.highest', cursor: 'grab', userSelect: 'none' })}
              >
                {item.title}
              </SplitView.DragSource>
            ))}
          </aside>
          <main className={css({ flex: 1, background: 'neutral.surface.high' })}>
            <SplitView.Root
              activePanelId={activePanelId}
              onLayoutChange={setLayout}
              renderPanel={({ panelId, isActivePanel }) => (
                <PanelContent panelId={panelId} isActivePanel={isActivePanel} />
              )}
            />
          </main>
        </div>
      </SplitView.DndProvider>
    );
  };

export default function SplitViewDefaultExample(props: Partial<SplitViewStoryArgs>) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as SplitViewStoryArgs;
  return SplitViewDefaultExampleRender(mergedProps);
}