/* eslint-disable react-hooks/rules-of-hooks */
import React from 'react';
import {useDispatch} from 'react-redux';
import {Meta, StoryObj} from '@storybook/react';
import {Button} from '@components/_HuGo/Button';
import {SnackbarVariant, showSnackbar} from '@redux/events';

const meta: Meta = {
  title: 'HuGo/Snackbar',
};

export const SnackComponent: StoryObj<{
  title: string;
  description: string;
  variant: SnackbarVariant;
  actionLabel: string;
}> = {
  argTypes: {
    title: {control: 'text'},
    description: {control: 'text'},
    variant: {
      control: 'radio',
      options: ['info', 'warning', 'error', 'success'],
    },
    actionLabel: {control: 'text'},
  },
  args: {
    title: 'Title',
    description: 'This is the body',
    actionLabel: 'Action',
    variant: 'info',
  },
  render: args => {
    const dispatch = useDispatch();
    const onPress = () => {
      dispatch(
        showSnackbar({
          title: args.title,
          description: args.description,
          variant: args.variant,
          action: args.actionLabel
            ? {
                label: args.actionLabel,
                eventName: 'event',
              }
            : undefined,
        }),
      );
    };
    return <Button text="Show snackbar" onPress={onPress} />;
  },
};

export default meta;
