import { Meta, Story } from '@storybook/react';
import React, { useState } from 'react';
import { ColorSelector } from '../../../components/Item/Inventory/ItemPropertyColorSelector';
import { RPGUIRoot } from '../../../components/RPGUI/RPGUIRoot';

export default {
  title: 'UI/Dropdowns & Selectors/Item Property Color Selector',
  component: ColorSelector,
  parameters: {
    layout: 'centered',
    docs: {
      description: {
        component:
          'A color selector component for items with optional cost warning.',
      },
    },
  },
  argTypes: {
    selectedColor: {
      control: { type: 'color' },
      description: 'Initial selected color.',
    },
    isOpen: {
      control: { type: 'boolean' },
      description: 'Controls whether the color selector is open.',
    },
    costWarning: {
      control: 'object',
      description: 'Optional warning about the cost of changing colors.',
    },
    onClose: { action: 'closed' },
    onConfirm: { action: 'confirmed' },
    onChange: { action: 'changed' },
  },
} as Meta;

const Template: Story = args => {
  const [isOpen, setIsOpen] = useState(args.isOpen ?? true);
  const [currentColor, setCurrentColor] = useState(
    args.selectedColor || '#000000'
  );

  const handleClose = () => {
    setIsOpen(false);
    args.onClose?.();
  };

  const handleConfirm = (color: string) => {
    setCurrentColor(color);
    setIsOpen(false);
    args.onConfirm?.(color);
  };

  const handleChange = (color: string) => {
    setCurrentColor(color);
    args.onChange?.(color);
  };

  return (
    <RPGUIRoot>
      <ColorSelector
        isOpen={isOpen}
        selectedColor={currentColor}
        onClose={handleClose}
        onConfirm={handleConfirm}
        onChange={handleChange}
        {...args}
      />
    </RPGUIRoot>
  );
};

export const Default = Template.bind({});
Default.args = {
  isOpen: true,
  selectedColor: '#ff0000',
};

export const WithCostWarning = Template.bind({});
WithCostWarning.args = {
  isOpen: true,
  selectedColor: '#ff0000',
  costWarning: {
    cost: 10000,
    currency: ' gold',
  },
};

export const WithCustomCurrency = Template.bind({});
WithCustomCurrency.args = {
  isOpen: true,
  selectedColor: '#ff0000',
  costWarning: {
    cost: 5000,
    currency: ' crystals',
  },
};

export const Closed = Template.bind({});
Closed.args = {
  isOpen: false,
  selectedColor: '#ff0000',
};
