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

import { Button } from '../Button/Button';
import { IconButton } from '../IconButton/IconButton';

import { ReorderableListing } from './ReorderableListing';
import type { ReorderableListingItemData, ReorderableListingKey } from './ReorderableListing';
import { ReorderableListingItem } from './ReorderableListingItem';

const ChangeCategoriesButton = (
  <Button variant='secondary' size='sm' iconLeft='shp-edit-icon'>
    Change categories
  </Button>
);

const Thumbnail = () => (
  <span
    style={{
      display: 'block',
      width: 40,
      height: 32,
      borderRadius: 2,
      background: 'rgb(var(--foreground--neutral-medium-default--light))',
    }}
  />
);

const meta: Meta<typeof ReorderableListing> = {
  title: 'UI kit/ReorderableListing',
  component: ReorderableListing,
  tags: ['autodocs'],
  args: {
    'aria-label': 'Reorderable list',
  },
  decorators: [
    Story => (
      <div style={{ width: 350 }}>
        <Story />
      </div>
    ),
  ],
};
export default meta;
type Story = StoryObj<typeof ReorderableListing>;

const defaultItems: ReorderableListingItemData[] = [
  { id: 'a', label: 'Label A' },
  { id: 'b', label: 'Label B' },
];

const exampleItems: ReorderableListingItemData[] = [
  { id: 'chairs', label: 'Chairs' },
  {
    id: 'tables',
    label: 'Tables',
    children: [
      { id: 'dining', label: 'Dining' },
      { id: 'coffee', label: 'Coffee' },
    ],
  },
  { id: 'armchairs', label: 'Armchairs', disabled: true },
  { id: 'stools', label: 'Stools', draggable: false },
  { id: 'sofas', label: 'Sofas', hidden: true },
  { id: 'dressers', label: 'Dressers' },
];

export const Default: Story = {
  args: {
    defaultItems,
    footer: ChangeCategoriesButton,
  },
};

export const Example: Story = {
  args: {
    defaultItems: exampleItems,
    footer: ChangeCategoriesButton,
  },
};

export const WithoutFooter: Story = {
  args: {
    defaultItems: exampleItems,
  },
};

export const Controlled: Story = {
  render: function Controlled() {
    const [items, setItems] = React.useState(exampleItems);

    const onHiddenChange = (id: ReorderableListingKey, hidden: boolean, parentId?: ReorderableListingKey) => {
      setItems(prev =>
        prev.map(item => {
          if (parentId !== undefined && item.id === parentId) {
            return { ...item, children: item.children?.map(c => (c.id === id ? { ...c, hidden } : c)) };
          }
          return item.id === id ? { ...item, hidden } : item;
        })
      );
    };

    return (
      <ReorderableListing
        aria-label='Reorderable list'
        items={items}
        onReorder={(_ids, next) => setItems(next)}
        onHiddenChange={onHiddenChange}
        footer={ChangeCategoriesButton}
      />
    );
  },
};

export const InUse: Story = {
  render: function InUse() {
    const blocks: ReorderableListingItemData[] = [
      { id: 'main-banner', label: 'Main banner' },
      { id: 'categories', label: 'Categories' },
      { id: 'product-banner', label: 'Product banner' },
    ];

    return (
      <ReorderableListing
        aria-label='Homepage blocks'
        defaultItems={blocks}
        footer={
          <Button variant='secondary' size='sm' iconLeft='shp-plus'>
            Add block
          </Button>
        }
        renderMedia={() => <Thumbnail />}
        renderActions={item => (
          <>
            <IconButton ghost size='sm' variant='secondary' icon='shp-preview' aria-label={`Preview ${item.label}`} />
            <IconButton ghost size='sm' variant='secondary' icon='shp-edit-icon' aria-label={`Edit ${item.label}`} />
            <IconButton ghost size='sm' variant='secondary' icon='shp-delete' aria-label={`Delete ${item.label}`} />
          </>
        )}
      />
    );
  },
};

/** All states and modes of the presentational row. */
export const ItemStates: StoryObj<typeof ReorderableListingItem> = {
  render: () => (
    <div style={{ display: 'flex', flexDirection: 'column' }}>
      <ReorderableListingItem mode='parent' state='default' label='Parent — default' />
      <ReorderableListingItem mode='parent' state='hover' label='Parent — hover' />
      <ReorderableListingItem mode='parent' state='dragging' label='Parent — dragging' />
      <ReorderableListingItem mode='parent' state='hidden' label='Parent — hidden' />
      <ReorderableListingItem mode='parent' state='disabled' label='Parent — disabled' />
      <ReorderableListingItem mode='subitem' state='default' label='Subitem — default' />
      <ReorderableListingItem mode='subitem' state='hover' label='Subitem — hover' />
      <ReorderableListingItem mode='subitem' state='hidden' label='Subitem — hidden' />
      <ReorderableListingItem mode='subitem' state='disabled' label='Subitem — disabled' />
    </div>
  ),
};