import { ComponentStory, ComponentMeta } from '@storybook/react';
import { Card } from 'components';
import { NotificationTypeEnum } from 'expo-schema';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { Item } from './index';

export default {
  title: 'Design System/Notification Item',
  component: Item,
  argTypes: {
    type: {
      options: NotificationTypeEnum,
      control: { type: 'select' },
    },
  },
} as ComponentMeta<typeof Item>;

export const Interactive: ComponentStory<typeof Item> = ({ type, ...args }) => {
  return (
    <SafeAreaProvider>
      <Card variant="plain" colorVariant="base-01" sizeVariant="small">
        <Item {...args} type={type} />
      </Card>
    </SafeAreaProvider>
  );
};

Interactive.args = {
  type: NotificationTypeEnum.PostMessage,
  notification: {
    type: NotificationTypeEnum.PostMessage,
    bodyContentPreview: 'I am the preview body of notification',
    createdAt: new Date(),
    notificationFromUser: {
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-ignore
      user: {
        name: {
          first: 'Muhammad',
          last: 'Sarmad',
        },
      },
    },
  },
};