import type { Meta, StoryObj } from '@storybook/react';
import React from 'react';
import { SkinSelectionGrid } from '../../components/Character/SkinSelectionGrid';
import { RPGUIRoot } from '../../components/RPGUI/RPGUIRoot';
import entitiesAtlasJSON from '../../mocks/atlas/entities/entities.json';
import entitiesAtlasIMG from '../../mocks/atlas/entities/entities.png';

/**
 * SkinSelectionGrid stories showcasing the carousel-style character skin selection component
 */
const meta = {
  title: 'Character/SkinSelectionGrid',
  component: SkinSelectionGrid,
  parameters: {
    layout: 'centered',
    docs: {
      description: {
        component: 
          'The SkinSelectionGrid component provides a carousel-style selection interface ' +
          'for character skins. Users can navigate through available skins using left and right arrows.',
      },
    },
  },
  decorators: [
    Story => (
      <RPGUIRoot>
        <div style={{ width: '400px', background: '#333', padding: '20px', borderRadius: '5px' }}>
          <Story />
        </div>
      </RPGUIRoot>
    ),
  ],
} satisfies Meta<typeof SkinSelectionGrid>;

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

// 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',
  },
  {
    id: 'character-1',
    name: 'Character 1',
    textureKey: 'character-1',
  },
  {
    id: 'character-2',
    name: 'Character 2',
    textureKey: 'character-2',
  },
  {
    id: 'character-3',
    name: 'Character 3',
    textureKey: 'character-3',
  },
  {
    id: 'character-4',
    name: 'Character 4',
    textureKey: 'character-4',
  },
];

/**
 * Default story showing the carousel-style skin selection with multiple character options
 * Users can navigate through the skins using left and right arrows
 */
export const Default: Story = {
  render: () => (
    <SkinSelectionGrid
      availableCharacters={availableCharacters}
      initialSelectedSkin="black-knight"
      onChange={(skinKey) => console.log('Selected skin:', skinKey)}
      atlasJSON={entitiesAtlasJSON}
      atlasIMG={entitiesAtlasIMG}
    />
  ),
};

/**
 * Story showing the skin selection with only a few options
 */
export const FewOptions: Story = {
  render: () => (
    <SkinSelectionGrid
      availableCharacters={availableCharacters.slice(0, 3)}
      initialSelectedSkin="dragon-knight"
      onChange={(skinKey) => console.log('Selected skin:', skinKey)}
      atlasJSON={entitiesAtlasJSON}
      atlasIMG={entitiesAtlasIMG}
    />
  ),
}; 