import { type Meta, type StoryObj } from '@storybook/react';
import { IconStar } from '@tabler/icons-react';

import StateCard from '.';

const meta: Meta<typeof StateCard> = {
  component: StateCard,
  title: 'Design System/StateCard',
  tags: ['autodocs'],
  argTypes: {
    title: { control: 'text' },
    description: { control: 'text' },
    variant: {
      control: 'select',
      options: ['primary', 'success', 'error', 'warning', 'wifi-off'],
      table: { defaultValue: { summary: 'primary' } },
    },
    icon: { control: false },
    primaryAction: { control: false },
    secondaryAction: { control: false },
    slotProps: { control: false },
    sx: { control: false },
  },
  parameters: {
    layout: 'centered',
  },
  args: {
    title: 'New Feature',
    description:
      'This is a new feature that has been added to the application.',
  },
};

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

export const Default: Story = {};

export const Success: Story = {
  args: {
    title: 'Success',
    variant: 'success',
  },
};

export const Error: Story = {
  args: {
    title: 'Error',
    variant: 'error',
  },
};

export const Warning: Story = {
  args: {
    title: 'Warning',
    variant: 'warning',
  },
};

export const WifiOff: Story = {
  args: {
    title: 'Wifi-off',
    variant: 'wifi-off',
  },
};

export const WithIcon: Story = {
  args: {
    ...Default.args,
    icon: IconStar,
  },
};

export const WithAction: Story = {
  args: {
    ...Default.args,
    primaryAction: {
      label: 'Learn More',
      onClick: () => alert('Action clicked!'),
    },
  },
};

export const WithSecondaryAction: Story = {
  args: {
    primaryAction: {
      label: 'Learn More',
      onClick: () => alert('Learn More clicked!'),
    },
    secondaryAction: {
      label: 'Dismiss',
      onClick: () => alert('Dismiss clicked!'),
    },
    variant: 'warning',
  },
};

export const WithLoadingPrimaryAction: Story = {
  args: {
    ...Default.args,
    primaryAction: {
      label: 'Submitting…',
      loading: true,
      onClick: () => undefined,
    },
    secondaryAction: {
      label: 'Cancel',
      onClick: () => alert('Cancel clicked!'),
    },
  },
};

export const WithDisabledActions: Story = {
  args: {
    ...Default.args,
    variant: 'error',
    primaryAction: {
      label: 'Retry',
      disabled: true,
      onClick: () => undefined,
    },
    secondaryAction: {
      label: 'Cancel',
      disabled: true,
      onClick: () => undefined,
    },
  },
};

export const WithCustomizedSlots: Story = {
  args: {
    ...Default.args,
    primaryAction: {
      label: 'Save',
      onClick: () => undefined,
    },
    slotProps: {
      avatar: { size: 'small' },
      title: { variant: 'S' },
      actionsContainer: { sx: { width: '100%', justifyContent: 'flex-end' } },
    },
  },
};