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

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

import { RadioGroup, type RadioGroupProps } from './RadioGroup';

interface PlanOption {
  id: string;
  name: string;
  description?: string;
  disabled?: boolean;
}

const planOptions: PlanOption[] = [
  { id: 'free', name: 'Free Plan' },
  { id: 'pro', name: 'Pro Plan', description: 'For growing businesses' },
  { id: 'business', name: 'Business Plan', description: 'For large organizations' },
];

const meta: Meta<RadioGroupProps<PlanOption, string | number>> = {
  title: 'UI kit/Form/Inputs/RadioGroup',
  component: RadioGroup,
  tags: ['autodocs'],
};

export default meta;
type Story = StoryObj<RadioGroupProps<PlanOption, string | number>>;

export const Default: Story = {
  args: {
    name: 'billingPlan',
    required: true,
    options: planOptions,
    getOptionValue: option => option.id,
    getOptionLabel: option => option.name,
    getOptionTooltip: option => option.description ?? '',
    disabledValues: ['business'],
  },
  parameters: {
    docs: {
      description: {
        story: `
Please provide the context for accessibility using \`aria-label\` or \`aria-labelledby\` on the \`RadioGroup\` component.

\`\`\`tsx
<span id="group-label">
  Visible radio group label
</span>
<RadioGroup name="radioGroupName" aria-labelledby="group-label" {...other props} />
\`\`\`
        `,
      },
    },
  },
};

export const Horizontal: Story = {
  args: {
    name: 'billingPlanHorizontal',
    options: planOptions,
    getOptionValue: option => option.id,
    getOptionLabel: option => option.name,
    getOptionTooltip: option => option.description ?? '',
    orientation: 'horizontal',
  },
};

export const WithActionSlot: Story = {
  render: () => {
    const [selected, setSelected] = React.useState<string | null>(null);

    return (
      <RadioGroup
        name='deliveryDate'
        value={selected}
        onChange={value => setSelected(value)}
        options={[
          { id: 'asap', name: 'As soon as possible' },
          { id: 'specific', name: 'Schedule from' },
        ]}
        getOptionValue={option => option.id}
        getOptionLabel={option => option.name}
        renderOption={(option, props) => (
          <RadioGroup.Option
            {...props}
            actionSlot={
              option.id === 'specific' ? (
                <DateField label='Date' labelHidden disabled={selected !== 'specific'} />
              ) : undefined
            }
          />
        )}
      />
    );
  },
};

interface ProductImageOption {
  id: string;
  name: string;
  src: string;
  aspectRatio: `${number} / ${number}`;
  size?: 'sm' | 'md' | 'lg';
}

const productImageOptions: ProductImageOption[] = [
  { id: 'black', name: 'Black', src: generateSvgPlaceholder(200, 200), aspectRatio: '1 / 1' },
  { id: 'silver', name: 'Silver', src: generateSvgPlaceholder(200, 200), aspectRatio: '1 / 1' },
  { id: 'blue', name: 'Blue', src: generateSvgPlaceholder(200, 200), aspectRatio: '1 / 1' },
];

const productImageOptionsWithError: ProductImageOption[] = [
  { id: 'black', name: 'Black', src: generateSvgPlaceholder(200, 200), aspectRatio: '1 / 1' },
  { id: 'silver', name: 'Silver', src: 'invalid-image-url', aspectRatio: '1 / 1' },
  { id: 'blue', name: 'Blue', src: generateSvgPlaceholder(200, 200), aspectRatio: '1 / 1' },
];

const landscapeImageOptions: ProductImageOption[] = [
  { id: 'mountain', name: 'Mountain', src: generateSvgPlaceholder(400, 200), aspectRatio: '2 / 1' },
  { id: 'ocean', name: 'Ocean', src: generateSvgPlaceholder(400, 200), aspectRatio: '2 / 1' },
  { id: 'forest', name: 'Forest', src: generateSvgPlaceholder(400, 200), aspectRatio: '2 / 1' },
];

const manyProductImageOptions: ProductImageOption[] = Array.from({ length: 20 }, (_, i) => ({
  id: `product-${i + 1}`,
  name: `Product ${i + 1}`,
  src: generateSvgPlaceholder(200, 200),
  aspectRatio: '1 / 1',
}));

export const WithImageOptionLoadingError: StoryObj<RadioGroupProps<ProductImageOption, string>> = {
  render: () => {
    const [selected, setSelected] = React.useState<string | null>('black');

    return (
      <RadioGroup
        name='productColorWithError'
        value={selected}
        onChange={value => setSelected(value)}
        options={productImageOptionsWithError}
        getOptionValue={option => option.id}
        getOptionLabel={option => option.name}
        orientation='horizontal'
        gap='md'
        renderOption={(option, props) => (
          <RadioGroup.ImageOption {...props} src={option.src} aspectRatio={option.aspectRatio} />
        )}
      />
    );
  },
};

export const WithImageOption: StoryObj<RadioGroupProps<ProductImageOption, string>> = {
  render: () => {
    const [selected, setSelected] = React.useState<string | null>('black');

    return (
      <RadioGroup
        name='productColor'
        value={selected}
        onChange={value => setSelected(value)}
        options={productImageOptions}
        getOptionValue={option => option.id}
        getOptionLabel={option => option.name}
        orientation='horizontal'
        gap='md'
        renderOption={(option, props) => (
          <RadioGroup.ImageOption {...props} src={option.src} aspectRatio={option.aspectRatio} />
        )}
      />
    );
  },
};

export const WithVerticalImageOptions: StoryObj<RadioGroupProps<ProductImageOption, string>> = {
  render: () => {
    const [selected, setSelected] = React.useState<string | null>('black');

    return (
      <RadioGroup
        name='verticalImage'
        value={selected}
        onChange={value => setSelected(value)}
        options={landscapeImageOptions}
        getOptionValue={option => option.id}
        getOptionLabel={option => option.name}
        renderOption={(option, props) => (
          <RadioGroup.ImageOption {...props} src={option.src} size='lg' aspectRatio={option.aspectRatio} />
        )}
      />
    );
  },
};

export const WithImageOptionsInGrid: StoryObj<RadioGroupProps<ProductImageOption, string>> = {
  render: () => {
    const [selected, setSelected] = React.useState<string | null>('product-1');

    return (
      <RadioGroup
        name='productMany'
        value={selected}
        onChange={value => setSelected(value)}
        options={manyProductImageOptions}
        getOptionValue={option => option.id}
        getOptionLabel={option => option.name}
        layout='grid'
        renderOption={(option, props) => (
          <RadioGroup.ImageOption {...props} src={option.src} aspectRatio={option.aspectRatio} size='full' />
        )}
      />
    );
  },
};