import React from 'react'
import type { Meta } from '@storybook/react'
import { IconButton, Icons, NormaChatMessageBalloon } from '../components'
import { useChatMessageBalloon } from '../components/NormaChatMessageBalloon/hook'
import { Avatar, Box, Typography } from '@mui/material'
import { SentimentDissatisfiedOutlined, TagFacesOutlined } from '@mui/icons-material'

const messageArr = [
  {
    direction: 'O' as 'O',
    label: 'Teste de Título',
    description:
      'lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec purus feugiat, molestie ipsum et, varius velit. Nulla nec purus feugiat, molestie ipsum et, varius velit.',
    date: '06/02/2025',
  },
  {
    direction: 'I' as 'I',
    label: 'Teste de Título',
    description:
      'lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec purus feugiat, molestie ipsum et, varius velit. Nulla nec purus feugiat, molestie ipsum et, varius velit.',
    date: '06/02/2025',
  },
  {
    direction: 'O' as 'O',
    label: 'Teste de Título',
    description:
      'lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec purus feugiat, molestie ipsum et, varius velit. Nulla nec purus feugiat, molestie ipsum et, varius velit.',
    date: '07/02/2025',
  },
]

const avatars = {
  O: {
    src: '',
    alt: 'HC',
  },
  I: {
    src: 'https://letsenhance.io/static/73136da51c245e80edc6ccfe44888a99/1015f/MainBefore.jpg',
    alt: 'MB',
  },
}

const Template = () => {
  return (
    <>
      {messageArr.map((message, index) => {
        const { balloonClassNames } = useChatMessageBalloon(() => console.log('hover'), false)
        return (
          <Box
            key={index}
            sx={{
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
              backgroundColor: '#F5F5F5',
              padding: '20px',
            }}
          >
            <NormaChatMessageBalloon.Root
              onMouseEnter={() => console.log('hover')}
              onMouseLeave={() => console.log('leave')}
            >
              <NormaChatMessageBalloon.Row
                direction={message.direction}
                onMouseEnter={() => console.log('row hover')}
                onMouseLeave={() => console.log('row leave')}
              >
                <NormaChatMessageBalloon.Content
                  label={message.label}
                  description={message.description}
                  direction={message.direction}
                  className={balloonClassNames}
                />
              </NormaChatMessageBalloon.Row>
              <NormaChatMessageBalloon.Row direction={message.direction}>
                <NormaChatMessageBalloon.Date date={message.date} />
              </NormaChatMessageBalloon.Row>
            </NormaChatMessageBalloon.Root>
          </Box>
        )
      })}
    </>
  )
}

const TemplateWithAvatar = () => {
  return (
    <>
      {messageArr.map((message, index) => {
        const { balloonClassNames } = useChatMessageBalloon(() => console.log('hover'), false)
        return (
          <Box
            key={index}
            sx={{
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
              backgroundColor: '#F5F5F5',
              padding: '20px',
            }}
          >
            <NormaChatMessageBalloon.Root
              onMouseEnter={() => console.log('hover')}
              onMouseLeave={() => console.log('leave')}
            >
              <NormaChatMessageBalloon.Row
                direction={message.direction}
                onMouseEnter={() => console.log('row hover')}
                onMouseLeave={() => console.log('row leave')}
              >
                <NormaChatMessageBalloon.Content
                  label={message.label}
                  description={message.description}
                  direction={message.direction}
                  className={balloonClassNames}
                />
              </NormaChatMessageBalloon.Row>
              <NormaChatMessageBalloon.Row direction={message.direction}>
                <Avatar
                  sx={{
                    width: '30px',
                    height: '30px',
                    marginX: '10px',
                    position: 'relative',
                  }}
                  src={avatars[message.direction].src}
                  alt={avatars[message.direction].alt}
                >
                  <Typography
                    sx={{
                      position: 'absolute',
                      top: '50%',
                      left: '50%',
                      transform: 'translate(-50%, -50%)',
                    }}
                  >
                    {avatars[message.direction].alt}
                  </Typography>
                </Avatar>
                <NormaChatMessageBalloon.Date date={message.date} />
              </NormaChatMessageBalloon.Row>
            </NormaChatMessageBalloon.Root>
          </Box>
        )
      })}
    </>
  )
}

const TemplateWithChildren = () => {
  return (
    <>
      {messageArr.map((message, index) => {
        const { balloonClassNames } = useChatMessageBalloon(() => console.log('hover'), false)
        return (
          <Box
            key={index}
            sx={{
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
              backgroundColor: '#F5F5F5',
              padding: '20px',
            }}
          >
            <NormaChatMessageBalloon.Root
              onMouseEnter={() => console.log('hover')}
              onMouseLeave={() => console.log('leave')}
            >
              <NormaChatMessageBalloon.Row
                direction={message.direction}
                onMouseEnter={() => console.log('row hover')}
                onMouseLeave={() => console.log('row leave')}
              >
                <NormaChatMessageBalloon.Content
                  label={message.label}
                  description={message.description}
                  direction={message.direction}
                  className={balloonClassNames}
                />
              </NormaChatMessageBalloon.Row>
              <NormaChatMessageBalloon.Row direction={message.direction}>
                <NormaChatMessageBalloon.Date date={message.date} />
              </NormaChatMessageBalloon.Row>
              {/* Children located here */}
              <NormaChatMessageBalloon.Row direction={message.direction}>
                <IconButton>
                  <Icons icon={TagFacesOutlined} scale="medium" color="black" />
                </IconButton>
                <IconButton>
                  <Icons icon={SentimentDissatisfiedOutlined} scale="medium" color="black" />
                </IconButton>
                <p>...children</p>
              </NormaChatMessageBalloon.Row>
            </NormaChatMessageBalloon.Root>
          </Box>
        )
      })}
    </>
  )
}

const SimplifiedTemplate = () => {
  return (
    <>
      {messageArr.map((message, index) => {
        const { balloonClassNames } = useChatMessageBalloon(() => console.log('hover'), false)
        return (
          <Box
            key={index}
            sx={{
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
              backgroundColor: '#F5F5F5',
              padding: '20px',
            }}
          >
            <NormaChatMessageBalloon.Root
              onMouseEnter={() => console.log('hover')}
              onMouseLeave={() => console.log('leave')}
            >
              <NormaChatMessageBalloon.MessageItem
                direction={message.direction}
                label={message.label}
                description={message.description}
                onMouseEnter={() => console.log('row hover')}
                onMouseLeave={() => console.log('row leave')}
                className={balloonClassNames}
                avatar={avatars[message.direction]}
                children={
                  <>
                    <IconButton>
                      <Icons icon={TagFacesOutlined} scale="medium" color="black" />
                    </IconButton>
                    <IconButton>
                      <Icons icon={TagFacesOutlined} scale="medium" color="primary" />
                    </IconButton>
                    <p>...children</p>
                  </>
                }
              />
            </NormaChatMessageBalloon.Root>
          </Box>
        )
      })}
    </>
  )
}

const meta = {
  title: 'Norma/ChatMessageBalloon',
  component: Template,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
  argTypes: {},
} satisfies Meta<typeof Template>

export default meta

export const Default = Template.bind({})
export const WithAvatar = TemplateWithAvatar.bind({})
export const WithChildren = TemplateWithChildren.bind({})
export const Simplified = SimplifiedTemplate.bind({})