import { MetadataType } from '@rpg-engine/shared';
import type { Meta, StoryObj } from '@storybook/react';
import React from 'react';
import { RPGUIRoot } from '../../../components/RPGUI/RPGUIRoot';
import { MetadataCollector } from '../../../components/Store/MetadataCollector';
import entitiesAtlasJSON from '../../../mocks/atlas/entities/entities.json';
import entitiesAtlasIMG from '../../../mocks/atlas/entities/entities.png';

/**
 * MetadataCollector stories showcasing different use cases for collecting metadata
 * during the purchase flow. This component is used when a purchase requires additional
 * user input before completing the transaction.
 */
const meta = {
  title: 'Features/Store/MetadataCollector',
  component: MetadataCollector,
  parameters: {
    layout: 'centered',
    docs: {
      description: {
        component: 
          'The MetadataCollector component handles collecting additional information from ' +
          'users during the purchase flow when needed. For example, when purchasing a ' +
          'character skin, the user needs to select which skin they want to use.',
      },
    },
  },
  decorators: [
    Story => (
      <RPGUIRoot>
        <Story />
      </RPGUIRoot>
    ),
  ],
} satisfies Meta<typeof MetadataCollector>;

export default meta;
type Story = StoryObj<typeof MetadataCollector>;

// Sample character skins
const availableCharacters = [
  {
    id: 'black-knight',
    name: 'Black Knight',
    textureKey: 'black-knight',
  },
  {
    id: 'dragon-knight',
    name: 'Dragon Knight',
    textureKey: 'dragon-knight',
  },
  {
    id: 'senior-knight-1',
    name: 'Senior Knight',
    textureKey: 'senior-knight-1',
  },
];

/**
 * Story showing the Character Skin selection interface that appears
 * when a user purchases a character skin item that requires selecting
 * which skin to apply.
 */
export const CharacterSkin: Story = {
  render: () => (
    <MetadataCollector
      metadataType={MetadataType.CharacterSkin}
      config={{
        availableCharacters,
        atlasJSON: entitiesAtlasJSON,
        atlasIMG: entitiesAtlasIMG,
        initialSelectedSkin: 'black-knight',
      }}
      onCollect={(metadata: Record<string, any>) => console.log('Metadata collected:', metadata)}
      onCancel={() => console.log('Metadata collection cancelled')}
    />
  ),
};

/**
 * Story showing the fallback for unhandled metadata types.
 * This demonstrates the behavior when a metadata type is requested
 * that hasn't been implemented yet.
 */
export const Unhandled: Story = {
  render: () => (
    <MetadataCollector
      metadataType={'unhandled-type' as MetadataType}
      config={{}}
      onCollect={() => console.log('Metadata collected')}
      onCancel={() => console.log('Metadata collection cancelled')}
    />
  ),
}; 