import { DemoStory } from '../demo/demo-types';
import { ResizableSplitter } from './resizable-splitter';

export const resizableSplitterDemo: DemoStory<any> = {
  id: 'resizable-splitter-demo',
  text: 'Resizable Splitter Demo',
  args: {
    isVertical: true,
  },
  argTypes: {
    isVertical: { control: 'boolean', description: 'If true, splits left/right. If false, splits top/bottom' },
  },
  render: (args) => {
    // The splitter hook targets a selector, so we create a unique container.
    const containerId = 'splitter-demo-box';

    // The logic expects to re-mount the splitter or reload the page for structural updates normally,
    // but we can hack it together for the demo by destroying and recreating the DOM.
    // For simplicity, we just use a fixed layout that reacts to the boolean toggle.

    if (args.isVertical) {
      return (
        <div
          style={{
            display: 'flex',
            width: '600px',
            height: '400px',
            padding: '20px',
            color: 'var(--primary-color, inherit)',
          }}
        >
          <div
            id={containerId}
            style={{
              width: '200px',
              height: '100%',
              border: 'var(--primary-border)',
              backgroundColor: 'var(--secondary-bg-color, #eee)',
              position: 'relative',
            }}
          >
            <div style={{ padding: '10px' }}>Left Panel (Drag right edge)</div>
            {ResizableSplitter.getSplitter(`#${containerId}`, true, true)}
          </div>
          <div
            style={{
              flex: 1,
              backgroundColor: 'var(--secondary-bg-color, #ddd)',
              border: 'var(--primary-border)',
              padding: '10px',
            }}
          >
            Right Panel (Flex 1)
          </div>
        </div>
      );
    } else {
      return (
        <div
          style={{
            display: 'flex',
            flexDirection: 'column',
            width: '600px',
            height: '400px',
            padding: '20px',
            color: 'var(--primary-color, inherit)',
          }}
        >
          <div
            id={containerId}
            style={{
              height: '150px',
              width: '100%',
              border: 'var(--primary-border)',
              backgroundColor: 'var(--secondary-bg-color, #eee)',
              position: 'relative',
            }}
          >
            <div style={{ padding: '10px' }}>Top Panel (Drag bottom edge)</div>
            {ResizableSplitter.getSplitter(`#${containerId}`, false, false)}
          </div>
          <div
            style={{
              flex: 1,
              backgroundColor: 'var(--secondary-bg-color, #ddd)',
              border: 'var(--primary-border)',
              padding: '10px',
            }}
          >
            Bottom Panel (Flex 1)
          </div>
        </div>
      );
    }
  },
  code: `import { ResizableSplitter } from 'lupine.components/components/resizable-splitter';

{/* Left/Right Splitter (isVertical=true means the divider line is vertical) */}
<div id="splitter-demo-box" style={{ width: '200px', height: '100%', position: 'relative' }}>
  <div style={{ padding: '10px' }}>Left Panel (Drag right edge)</div>
  {ResizableSplitter.getSplitter('#splitter-demo-box', true, true)}
</div>
`,
};