import { MehOutlined } from '@ant-design/icons'
import { Popover } from 'antd'
import style from './index.less'
import React, { useCallback, useState } from 'react'
const arr1 = [
    "😄", "😊", "😃", "😉", "😍", "😘", "😚", "😳", "😁", "😌", "😜", "😝", "😒", "😏",
    "😓", "😔", "😞", "😖", "😥", "😰", "😨", "😣", "😢", "😭", "😂", "😲", "😱", "😠",
    "😡", "😪", "😷", "👿", "👽", "❤️", "💔", "💘", "✨", "🌟", "❕", "❔", "💤", "💦",
    "🎵", "🔥", "💩", "👍", "👎", "👊", "✌️", "👆", "👇", "👉", "👈", "☝️"
]
const arr2 = [
    "💪", "💏", "💑", "👦", "👧", "👩", "👨", "👼", "💀", "👄", "☀", "☔", "☁", "⛄",
    "🌙", "⚡", "🌊", "🐱", "🐶", "🐭", "🐹", "🐰", "🐺", "🐸", "🐯", "🐨", "🐻", "🐷",
    "🐮", "🐗", "🐵", "🐴", "🐍", "🐦", "🐔", "🐧", "🐛", "🐙", "🐠", "🐳", "🐬", "🌹",
    "🌺", "🌴", "🌵", "💝", "🎃", "👻", "🎅", "🎄", "🎁", "🔔", "🎉", "🎈"
]
const arr3 = [
    "💿", "📷", "🎥", "💻", "📺", "☎", "🔓", "🔒", "🔑", "🔨", "💡", "📫", "🛀", "💰",
    "💣", "🔫", "💊", "🏈", "🏀", "⚽", "⚾", "⛳", "🏆", "👾", "🎤", "🎸", "👙", "👑",
    "🌂", "👜", "💄", "💍", "💎", "☕", "🍺", "🍻", "🍸", "🍔", "🍟", "🍝", "🍣", "🍜",
    "🍳", "🍦", "🎂", "🍎", "✈", "🚀", "🚲", "🚄", "⚠", "🏁", "🚹", "🚺"
]
const arr4 = ["⭕", "❌", "©", "®", "™"]
type Props = {
    getStr: (str: string, range: Range) => void//回调传回选中表情和最后光标位置
    range: Range//文本光标节点
}
function Expression(props: Props) {
    const [eq, setEq] = useState<number>(0)//当前页
    const [left, setLeft] = useState<number>(0)//偏移
    const [isShow, setIsShow] = useState<boolean>(false)//弹窗
    //显示关闭弹窗
    const exit = useCallback(() => {
        setIsShow(!isShow)
    }, [isShow])
    //点击表情
    const handelClick = useCallback((str: string) => {
        props.getStr(str, props.range)
        setIsShow(false)
    }, [props.range])
    //点击翻页
    const handelAction = useCallback((eq: number) => {
        setEq(eq)
        setLeft(eq * 400)
    }, [])
    return <div>
        <Popover
            content={
                <div className={style.expression} >
                    {
                        [arr1, arr2, arr3, arr4].map((item: string[], index: number) => {
                            return <div key={index} className={style.box} style={{ transform: `translateX(-${left}px)` }} >
                                {
                                    item.map((em: string, index: number) => {
                                        return <span key={index} onClick={() => handelClick(em)}>{em}</span>
                                    })
                                }
                            </div>
                        })
                    }
                    <div className={style.bottom}>
                        {
                            [0, 1, 2, 3].map((item) => {
                                return <span className={`${style.yd} ${eq === item ? style.action : undefined}`} key={item} onClick={() => handelAction(item)} />
                            })
                        }
                    </div>
                </div>
            }
            trigger="click"
            open={isShow}
            onOpenChange={exit}
        >
            <MehOutlined onClick={exit} />
        </Popover>
    </div>
}

export default Expression