import { Meta, StoryObj } from '@storybook/react';
import React from 'react';
import { RPGUIRoot } from '../../..';
import {
    CharacterSkinSelectionModal
} from '../../../components/Character/CharacterSkinSelectionModal';
import atlasJSON from '../../../mocks/atlas/entities/entities.json';
import atlasIMG from '../../../mocks/atlas/entities/entities.png';

/**
 * Character skin selection modal with carousel-style navigation.
 * This allows users to browse through available character skins using arrow buttons.
 */
const meta = {
  title: 'Character/Character/Skin Selection',
  component: CharacterSkinSelectionModal,
  parameters: {
    layout: 'centered',
    docs: {
      description: {
        component: 
          'Character Skin Selection modal with carousel-style navigation. ' +
          'Users can browse through available skins using left and right arrows.',
      },
    },
  },
  decorators: [
    Story => (
      <RPGUIRoot>
        <div style={{ background: '#333', padding: '10px', borderRadius: '5px' }}>
          <Story />
        </div>
      </RPGUIRoot>
    ),
  ],
} satisfies Meta<typeof CharacterSkinSelectionModal>;

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

// Example of different character skins
const characterSkins = [
  {
    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 character skin selection modal with multiple options.
 * Users can navigate through the available skins using the left and right arrows.
 */
export const Default: Story = {
  render: () => (
    <CharacterSkinSelectionModal
      isOpen={true}
      onClose={() => console.log('Modal closed')}
      onConfirm={(textureKey: string) => console.log('Selected skin:', textureKey)}
      availableCharacters={characterSkins}
      atlasJSON={atlasJSON}
      atlasIMG={atlasIMG}
      initialSelectedSkin="black-knight"
    />
  ),
};

/**
 * Story showing the skin selection modal with just a few options.
 */
export const FewOptions: Story = {
  render: () => (
    <CharacterSkinSelectionModal
      isOpen={true}
      onClose={() => console.log('Modal closed')}
      onConfirm={(textureKey: string) => console.log('Selected skin:', textureKey)}
      availableCharacters={characterSkins.slice(0, 3)}
      atlasJSON={atlasJSON}
      atlasIMG={atlasIMG}
      initialSelectedSkin="dragon-knight"
    />
  ),
};
