import type React from 'react';

import Button from '@design-system/Buttons/Button';
import { type Meta, type StoryObj } from '@storybook/react-vite';

import { type SnackbarProps } from './types';
import { SnackbarProvider, useSnackbar } from '.';

const meta: Meta<SnackbarProps> = {
  title: 'Design System/Snackbar',
  tags: ['autodocs'],
  parameters: {
    docs: {
      story: { height: '320px' },
    },
  },
  argTypes: {
    title: { control: 'text' },
    description: { control: 'text' },
    variant: {
      control: 'radio',
      options: ['success', 'error', 'warning', 'info'],
    },
    hasClose: { control: 'boolean' },
    cancelAction: { control: 'object' },
  },
  args: {
    title: 'Snackbar Title',
    description: 'This is a description for the snackbar.',
    variant: 'success',
    hasClose: true,
    cancelAction: undefined,
  },
};

export default meta;

type Story = StoryObj<SnackbarProps>;

const SnackbarTrigger: React.FC<SnackbarProps> = props => {
  const { enqueueSnackbar } = useSnackbar();

  return (
    <Button
      variant="contained"
      onClick={() => enqueueSnackbar(props)}
    >
      Show snackbar
    </Button>
  );
};

const SnackbarTemplate: React.FC<SnackbarProps> = args => {
  return (
    <SnackbarProvider>
      <SnackbarTrigger {...args} />
    </SnackbarProvider>
  );
};

export const Default: Story = {
  render: args => <SnackbarTemplate {...args} />,
};

export const Success: Story = {
  render: args => <SnackbarTemplate {...args} />,
  args: {
    title: 'Success',
    description: 'This is a success message',
    variant: 'success',
  },
};

export const Error: Story = {
  render: args => <SnackbarTemplate {...args} />,
  args: {
    title: 'Error',
    description: 'This is an error message',
    variant: 'error',
  },
};

export const Warning: Story = {
  render: args => <SnackbarTemplate {...args} />,
  args: {
    title: 'Warning',
    description: 'This is a warning message',
    variant: 'warning',
  },
};

export const Info: Story = {
  render: args => <SnackbarTemplate {...args} />,
  args: {
    title: 'Info',
    description: 'This is an informational message',
    variant: 'info',
  },
};

export const OnlyTitle: Story = {
  render: args => <SnackbarTemplate {...args} />,
  args: {
    title: 'Title very descriptive itself',
    description: undefined,
    variant: 'info',
  },
};

export const WithCancelAction: Story = {
  render: args => <SnackbarTemplate {...args} />,
  args: {
    title: 'Action Required',
    description: 'This message has an action',
    variant: 'warning',
    cancelAction: {
      text: 'Cancel action',
      onClick: () => alert('Undo action triggered!'),
    },
  },
};

export const WithLongText: Story = {
  render: args => <SnackbarTemplate {...args} />,
  args: {
    title: 'Action Required',
    description:
      'This message has an action that is very descriptive and talkative and wow please stop writing',
    variant: 'warning',
    cancelAction: {
      text: 'Cancel action',
      onClick: () => alert('Undo action triggered!'),
    },
  },
};