//
// Copyright 2025 DXOS.org
//

import { type Meta, type StoryObj } from '@storybook/react-vite';
import React from 'react';

import { Input, ScrollArea } from '../../components';
import { withLayout, withTheme } from '../../testing';
import { Column } from './Column';

const List = () => {
  return (
    <ScrollArea.Root centered>
      <ScrollArea.Viewport>
        {Array.from({ length: 100 }).map((_, i) => (
          <Input.Root key={i}>
            <Input.TextInput value={`Item ${i}`} readOnly />
          </Input.Root>
        ))}
      </ScrollArea.Viewport>
    </ScrollArea.Root>
  );
};

const DefaultStory = () => {
  return (
    <Column.Root classNames='overflow-hidden' gutter='md'>
      <Column.Center>
        <h1 className='p-1 bg-blue-500 text-black'>Header</h1>
      </Column.Center>

      <Column.Row>
        <div className='p-1 bg-blue-500'>A</div>
        <div className='p-1 bg-red-500'>B</div>
        <div className='p-1 bg-blue-500'>C</div>
      </Column.Row>

      <Column.Center asChild>
        <div>
          <Input.Root>
            <Input.TextInput placeholder='Search' />
          </Input.Root>
        </div>
      </Column.Center>

      <ScrollArea.Root orientation='vertical' padding>
        <ScrollArea.Viewport>
          <div className='flex flex-col gap-2'>
            {Array.from({ length: 100 }).map((_, i) => (
              <Input.Root key={i}>
                <Input.TextInput value={`Item ${i}`} readOnly />
              </Input.Root>
            ))}
          </div>
        </ScrollArea.Viewport>
      </ScrollArea.Root>

      <Column.Center asChild>
        <div className='flex flex-col'>
          <h1 className='p-1 bg-red-500 text-black'>Section with overflow</h1>
          <pre className='p-1 text-xs text-subdued overflow-auto'>{new Error().stack}</pre>
        </div>
      </Column.Center>

      <Column.Center>
        <div className='p-1 bg-green-500 text-black'>Footer</div>
      </Column.Center>
    </Column.Root>
  );
};

const meta: Meta = {
  title: 'ui/react-ui-core/components/Column',
  render: DefaultStory,
  decorators: [withTheme(), withLayout({ layout: 'column', classNames: 'w-[25rem]' })],
  parameters: {
    layout: 'fullscreen',
  },
};

export default meta;

type Story = StoryObj<typeof meta>;

export const Default: Story = {};

const InputList = ({ items = 50 }: { items?: number }) => (
  <div className='flex flex-col gap-2'>
    {Array.from({ length: items }).map((_, index) => (
      <Input.Root key={index}>
        <Input.TextInput value={`Item ${index + 1}`} readOnly />
      </Input.Root>
    ))}
  </div>
);

export const WithScrollArea = {
  decorators: [withLayout({ layout: 'column' })],
  render: () => (
    <Column.Root classNames='overflow-hidden' gutter='md'>
      <Column.Center>
        <h2>Header</h2>
      </Column.Center>
      <ScrollArea.Root padding centered orientation='vertical'>
        <ScrollArea.Viewport>
          <InputList items={30} />
        </ScrollArea.Viewport>
      </ScrollArea.Root>
      <Column.Center>
        <h2>Footer</h2>
      </Column.Center>
    </Column.Root>
  ),
};

/**
 * Column.Center places a single element in the center column of the parent grid.
 * Preferred for centered content — safe to nest
 * compound components (Form.Root, Editor.Root, etc.) that render `display: contents`.
 */
export const WithCenter: Story = {
  decorators: [withLayout({ classNames: 'w-[25rem]' })],
  render: () => (
    <Column.Root gutter='md'>
      <Column.Center>
        <h2>Header (Column.Center)</h2>
      </Column.Center>
      <Column.Center classNames='flex flex-col'>
        <p>This text is inside Column.Center. It sits in the central column between the gutters.</p>
        <Input.Root>
          <Input.Label>Name</Input.Label>
          <Input.TextInput placeholder='Enter name' />
        </Input.Root>
      </Column.Center>
      <Column.Center>
        <h2>Footer (Column.Center)</h2>
      </Column.Center>
    </Column.Root>
  ),
};

/**
 * ScrollArea auto-bleeds inside Column.Root (via [.dx-column_&]:col-span-full).
 * No Column.Bleed wrapper needed.
 */
export const WithScrollAreaAutoBleed: Story = {
  decorators: [withLayout({ layout: 'column', classNames: 'w-[25rem]' })],
  render: () => (
    <Column.Root classNames='overflow-hidden' gutter='md'>
      <Column.Center>
        <h2>Header (Column.Center)</h2>
      </Column.Center>
      <ScrollArea.Root orientation='vertical' padding thin>
        <ScrollArea.Viewport>
          <InputList items={30} />
        </ScrollArea.Viewport>
      </ScrollArea.Root>
      <Column.Center>
        <h2>Footer (Column.Center)</h2>
      </Column.Center>
    </Column.Root>
  ),
};

export const Experimental = {
  render: () => {
    return (
      <div className='grid grid-cols-[2rem_1fr_2rem]'>
        <div className='col-span-full grid grid-cols-subgrid'>
          <div className='bg-red-surface'>A</div>
          <div className='bg-green-surface'>B</div>
          <div className='bg-blue-surface'>C</div>
        </div>
        <div className='col-span-full grid grid-cols-subgrid col-start-2'>
          <div className='bg-green-surface'>B</div>
        </div>
      </div>
    );
  },
};