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

import Alert from '.';

const meta: Meta<typeof Alert> = {
  component: Alert,
  title: 'Design System/Alert',
  tags: ['autodocs'],
  argTypes: {
    title: { control: 'text' },
    loading: { control: 'boolean' },
  },
  args: {
    description: 'Description example',
    title: 'Title example',
    severity: 'success',
    hasClose: true,
    action: { text: 'Action!', onClick: () => alert('Action has been run') },
    loading: false,
  },
};

export default meta;

type Story = StoryObj<typeof Alert>;

export const Default: Story = {
  args: {},
};

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

export const Loading: Story = {
  args: {
    severity: 'success',
    loading: true,
  },
};

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

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

export const Info: Story = {
  args: {
    severity: 'info',
  },
};

export const Highlight: Story = {
  args: {
    severity: 'highlight',
  },
};

export const NoDescription: Story = {
  args: {
    severity: 'highlight',
    description: undefined,
  },
};

export const NoAction: Story = {
  args: {
    severity: 'highlight',
    description: undefined,
    action: undefined,
  },
};

export const CustomDescription: Story = {
  args: {
    severity: 'highlight',
    description: (
      <Stack
        sx={{
          p: 2,
          border: '1px solid',
        }}
      >
        Custom description using React.ReactNode. Used to display Trans i18n
        content.
      </Stack>
    ),
    action: undefined,
  },
};

export const NoClose: Story = {
  args: {
    severity: 'highlight',
    description: undefined,
    action: undefined,
    hasClose: false,
  },
};