import { useState } from 'react'
import Taro from '@tarojs/taro'
import { Image, View } from '@tarojs/components'
import IconCertificateColor from "@/components/icon/icon-certificate-color";
import { TAgentDetail } from '@/types/agent';
import { AvatarMedia } from '@/components/AvatarMedia';
import IconMicOutline from '@/components/icon/IconMicOutline';
import IconArrowRightGray from '@/components/icon/IconArrowRightGray';
import IconClean from '@/components/icon/IconClean';
import IconArrowVerticalFilled from '@/components/icon/IconArrowVerticalFilled';
import { useTextChat } from '@/store/textChatStore';

import style from './index.module.less'

interface IProps {
  agent: TAgentDetail|null
  haveBg: boolean
  onClear: ()=>void
}
export default ({haveBg, agent, onClear}:IProps) => {

  /**
   * 之前个人卡片信息有两种样式，现在统一为一种
   */

  const nameStyle = haveBg ? 'text-white' : 'text-black'
  const entStyle = haveBg ? 'text-white' : 'text-black-45'
  const [show, setShow] = useState(false)
  const { setIsNewChat } = useTextChat()

  const handleClick = (e:any) => {
    e.stopPropagation()
    setShow(!show)
  }
  const handleClean = (e:any) => {
    // e.stopPropagation()
    console.log('clean')
    setShow(false)
    setIsNewChat(true)
    onClear()
  }
  const handleVoiceChoose = (e:any) => {
    setShow(false)
    Taro.navigateTo({
      url: '/pages/voice/index'
    })
    console.log('handleVoiceChoose')
  }
  const renderContent = () => {
    return <>
      <View className='flex items-center' onClick={handleClick}>
        <View className='flex-1 flex items-center mr-16'>
          <View className="rounded-full overflow-hidden w-36 h-36 shrink-0 mr-8">
            <AvatarMedia source={agent?.avatarLogo || ''} className='w-36 h-36'></AvatarMedia>
          </View>
          <View className="flex flex-col flex-1 gap-6">
            <View className="flex items-center gap-4">
              <View className={`text-14 font-medium leading-14 ${nameStyle}`}>{agent?.name}</View>
              {agent?.isEnt && <View className="text-12 leading-12"><IconCertificateColor/></View>}
            </View>
            {agent?.entName && <View className="flex items-center gap-2">
              <View className={`text-12 leading-12 truncate max-w-[180px] ${entStyle}`}>
                {agent?.entName}
              </View>
            </View>}
          </View>
        </View>
        <View className='w-16 h-16'>
          <View className='relative w-16 h-16'>
            <View>
              <IconArrowVerticalFilled color={ haveBg ? 'white' : 'gray' } rotation={show ? 0 : 180}  />
            </View>
            {!!show && <View className={style.bubbleWrapper} onClick={(e)=>e.stopPropagation()}>
              <View className={`flex flex-col gap-8 ${style.bubble}`}>
                <View className={style.bubbleArrowWrap}>
                  <View className={style.bubbleArrow}></View>
                </View>
                <View className='flex items-center gap-4' onClick={handleClean}>
                  <View className='w-16 h-16'>
                    <IconClean />
                  </View>
                  <View className='flex-1'>清除对话</View>
                </View>
                <View className='h-1' style={{backgroundColor: 'rgba(17,17,17,.15)', width: '100%'}}></View>
                <View className='flex items-center gap-4' onClick={handleVoiceChoose}>
                  <View className='w-16 h-16'><IconMicOutline/></View>
                  <View className='flex-1'>音色选择</View>
                  <View className='w-16 h-16'><IconArrowRightGray/></View>
                </View>
              </View>
            </View>}
          </View>
        </View>
      </View>
    </>
  }
  return (
    <View className="flex items-center gap-8">
      {renderContent()}
    </View>
  )
}