import React from 'react'

import type { Meta } from '@storybook/react'
import { ChatMessageBalloon } from '../components'
import { Typography } from '@mui/material'

const meta = {
  title: 'Display/ChatMessageBalloon',
  component: ChatMessageBalloon,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
  argTypes: {},
}

export default meta

export const ChatMessageBalloonBasic = () => {
  return (
    <div style={{ backgroundColor: '#F0F0F0', boxSizing: 'border-box', padding: '20px' }}>
      <ChatMessageBalloon
        onMouseEnter={() => console.log('onMouseEnter')}
        bottomChildren={<div>Bottom Children</div>}
        label="Agente Marcos"
        description={
          <Typography
            variant="body1"
            style={{
              fontSize: '16px',
            }}
          >
            {
              'Olá, tudo bem? Meu nome é Ana e falo em nome do banco Bradesco. Eu gostaria de falar com Maria Conceição da Silva'
            }
          </Typography>
        }
        date={'10:23'}
        direction="I"
        attachments={[]}
      >
        <span
          style={{
            height: '38px',
            width: '38px',
            border: '1px solid #FF8348',
            borderRadius: '38px',
            backgroundColor: '#FFF',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            marginRight: '10px',
          }}
        >
          {'1'}
        </span>
        <span
          style={{
            height: '38px',
            width: '38px',
            border: '1px solid #FF8348',
            borderRadius: '38px',
            backgroundColor: '#FFF',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          {'2'}
        </span>
      </ChatMessageBalloon>

      <ChatMessageBalloon
        onMouseEnter={() => console.log('onMouseEnter')}
        bottomChildren={<div>Bottom children</div>}
        label="Agente Marcos"
        description={
          <Typography
            variant="body1"
            style={{
              fontSize: '16px',
            }}
          >
            {
              'Olá, tudo bem? Meu nome é Ana e falo em nome do banco Bradesco. Eu gostaria de falar com Maria Conceição da Silva'
            }
          </Typography>
        }
        date={'10:23'}
        direction="O"
        attachments={[]}
      >
        <span
          style={{
            height: '38px',
            width: '38px',
            border: '1px solid #FF8348',
            borderRadius: '38px',
            backgroundColor: '#FFF',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            marginRight: '10px',
          }}
        >
          {'1'}
        </span>
        <span
          style={{
            height: '38px',
            width: '38px',
            border: '1px solid #FF8348',
            borderRadius: '38px',
            backgroundColor: '#FFF',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          {'2'}
        </span>
      </ChatMessageBalloon>
    </div>
  )
}