import type { Meta, StoryFn } from '@storybook/react'
import React from 'react'
import { LocalMessage } from 'stream-chat'

import { now } from '../../../stories/decorators/storyTime'

import { TipMessage } from '.'

type ComponentProps = React.ComponentProps<typeof TipMessage>

const meta: Meta<ComponentProps> = {
  title: 'TipMessage',
  component: TipMessage,
  parameters: {
    layout: 'centered',
  },
}
export default meta

interface MockMessageOptions {
  metadata?: {
    custom_type?: 'MESSAGE_TIP'
    amount_text?: string
  }
  text?: string
}

const createMockMessage = (options?: MockMessageOptions): LocalMessage =>
  ({
    id: 'msg-1',
    text: options?.text ?? '',
    type: 'regular',
    created_at: now(),
    updated_at: now(),
    metadata: options?.metadata,
  }) as LocalMessage

const Template: StoryFn<ComponentProps> = (args) => {
  return (
    <div className="p-12">
      <TipMessage {...args} />
    </div>
  )
}

export const Standalone: StoryFn<ComponentProps> = Template.bind({})
Standalone.args = {
  message: createMockMessage({
    metadata: { custom_type: 'MESSAGE_TIP', amount_text: '$50.00' },
  }),
}