import { Meta, Story } from '@storybook/react';
import React from 'react';
import { RPGUIRoot } from '../../..';
import { CraftBook } from '../../../components/CraftBook/CraftBook';
import { craftableItems } from '../../../components/CraftBook/MockItems';
import atlasJSON from '../../../mocks/atlas/items/items.json';
import atlasIMG from '../../../mocks/atlas/items/items.png';
import { equipmentSetMock } from '../../../mocks/equipmentSet.mocks';

// Generate more mock items for pagination testing
const generateMoreItems = (baseItems: typeof craftableItems) => {
  const moreItems = [...baseItems];

  // Create 3 variations of each item
  baseItems.forEach(item => {
    for (let i = 1; i <= 3; i++) {
      moreItems.push({
        ...item,
        key: `${item.key}-${i}`,
        name: `${item.name} ${i}`,
        ingredients: item.ingredients.map(ing => ({
          ...ing,
          key: `${ing.key}-${i}`,
          qty: ing.qty + i,
        })),
      });
    }
  });

  return moreItems;
};

const extendedCraftableItems = generateMoreItems(craftableItems);

const meta: Meta = {
  title: 'Features/Crafting/Craft Book',
  component: CraftBook,
  parameters: {
    layout: 'fullscreen',
  },
};

export default meta;

const Template: Story = args => (
  <RPGUIRoot>
    <CraftBook
      atlasIMG={atlasIMG}
      atlasJSON={atlasJSON}
      onSelect={onSelect}
      onClose={() => console.log('closing Equipment Set Container')}
      craftablesItems={args.craftablesItems ?? extendedCraftableItems}
      onCraftItem={(value, maxCraftable) => {
        console.log('Crafting:', {
          itemKey: value,
          maxCraftable: maxCraftable,
        });
      }}
      equipmentSet={equipmentSetMock}
      {...args}
    />
  </RPGUIRoot>
);

export const Default = Template.bind({});

const onSelect = (value: string) => {
  console.log('Story package', value);
};

Default.args = {};

// Add a story with search pre-filled
export const WithSearch = Template.bind({});
WithSearch.args = {
  searchTerm: 'sword',
};

// Add a story with a specific category selected
export const WithCategory = Template.bind({});
WithCategory.args = {
  savedSelectedType: 'Weapon',
};

// Add a story with empty state
export const Empty = Template.bind({});
Empty.args = {
  craftablesItems: [],
  savedSelectedType: 'Weapon',
};

// Add a story with search that yields no results
export const NoSearchResults = Template.bind({});
NoSearchResults.args = {
  craftablesItems: extendedCraftableItems,
  searchTerm: 'xyzabc123', // A search term that won't match any items
};
