import { useReactiveVar } from '@apollo/client';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { AlertOptionsVar, alertOptionsVar } from 'state-management/alert';
import { colors } from 'theme/color';
import { AlertWrapper } from './index';

export default {
  title: 'Design System/Alert',
  component: AlertWrapper,
  argTypes: {
    alertVariantLocal: {
      options: ['success', 'info', 'warning', 'error'],
      control: { type: 'select' },
    },
    variantVar: {
      options: ['success', 'info', 'warning', 'error'],
      control: { type: 'select' },
    },
    iconColorVariant: {
      options: colors,
      control: { type: 'select' },
    },
  },
} as ComponentMeta<typeof AlertWrapper>;

export const Interactive: ComponentStory<typeof AlertWrapper> = (args) => {
  alertOptionsVar({
    messageVar: 'Hello i am testing the args',
    isOpenVar: true,
    variantVar: 'info',
  });

  const { contentVar, leftElementVar }: AlertOptionsVar = useReactiveVar(alertOptionsVar);
  return (
    <SafeAreaProvider>
      <AlertWrapper
        contentVar={contentVar}
        messageVar={args.messageVar}
        leftElementVar={leftElementVar}
        {...args}
      />
    </SafeAreaProvider>
  );
};

Interactive.args = {
  variantVar: 'info',
  iconColorVariant: 'title',
  alertVariantLocal: 'info',
  titleVar: 'Title',
  messageVar: 'I am the body of the alert',
};