import { ComponentStory, ComponentMeta } from '@storybook/react';
import { RichTextContentSegment } from 'expo-schema';
import { block } from 'mock';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { BrowserRouter } from 'react-router-dom';
import { ReferenceMessage } from './index';

export default {
  title: 'App Components/Chat/ReferenceMessage',
  component: ReferenceMessage,
  argTypes: {
    status: {
      options: ['edit', 'reply', 'quote'],
      control: { type: 'select' },
    },
  },
} as ComponentMeta<typeof ReferenceMessage>;

export const Interactive: ComponentStory<typeof ReferenceMessage> = (args) => {
  return (
    <BrowserRouter>
      <SafeAreaProvider>
        <ReferenceMessage {...args} />
      </SafeAreaProvider>
    </BrowserRouter>
  );
};

Interactive.args = {
  variant: 'edit',
  message: {
    id: '354',
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    richTextContent: block.richTextContent2 as unknown as RichTextContentSegment,
    userName: {
      first: 'Muhammad ',
      last: 'Sarmad',
    },
    userProfilePhotoUrl: 'https://avatars.githubusercontent.com/u/98377997',
  },
};