import React, { useState } from 'react';
import type { Meta, StoryObj } from '@storybook/react-vite';

import { generateSvgPlaceholder } from '../../../utils/storybook';

import { ImageSelectField, type ImageSelectFieldProps } from './ImageSelectField';

interface ImageOption {
  id: string;
  label: string;
  src: string;
}

const sampleOptions: ImageOption[] = [
  { id: 'product-a', label: 'Phone — Black', src: generateSvgPlaceholder(400, 260) },
  { id: 'product-b', label: 'Phone — Silver', src: generateSvgPlaceholder(400, 260) },
  { id: 'product-c', label: 'Phone — Blue', src: generateSvgPlaceholder(400, 260) },
];

const meta: Meta<typeof ImageSelectField<ImageOption, string>> = {
  title: 'UI kit/Form/ImageSelectField',
  component: ImageSelectField,
  tags: ['autodocs'],
};

export default meta;

type Story = StoryObj<ImageSelectFieldProps<ImageOption, string>>;

const render = (props: ImageSelectFieldProps<ImageOption, string>) => {
  const [value, setValue] = useState<string | null>(props.value ?? null);
  return <ImageSelectField {...props} value={value} onChange={setValue} />;
};

const baseArgs: Partial<ImageSelectFieldProps<ImageOption, string>> = {
  label: 'Featured image',
  options: sampleOptions,
  getOptionValue: option => option.id,
  getOptionLabel: option => option.label,
  getOptionImageSrc: option => option.src,
};

export const Default: Story = {
  args: { ...baseArgs },
  render,
};

export const WithHint: Story = {
  args: { ...baseArgs, hint: 'Shown on the product card.' },
  render,
};

export const WithError: Story = {
  args: { ...baseArgs, error: 'Please choose an image.' },
  render,
};

export const Required: Story = {
  args: { ...baseArgs, required: true },
  render,
};

export const HiddenLabel: Story = {
  args: { ...baseArgs, labelHidden: true },
  render,
};