import { useEffect, useMemo, useState } from "react"
import { useMessageStore } from "./messageStore"
import { useTranslation } from "react-i18next"

// 引导词推荐
export default function GuideQuestions({ locked, chatId, questions, onClick }) {
    const [showGuideQuestion, setShowGuideQuestion] = useMessageStore(state => [state.showGuideQuestion, state.setShowGuideQuestion])

    const { t } = useTranslation()

    useEffect(() => {
        questions.length && setShowGuideQuestion(true)
    }, [chatId])

    const words = useMemo(() => {
        if (questions.length < 4) return questions
        // 随机按序取三个
        const res = []
        const randomIndex = Math.floor(Math.random() * questions.length)
        for (let i = 0; i < 3; i++) {
            const item = questions[(randomIndex + i) % (questions.length - 1)]
            res.push(item)
        }
        return res
    }, [questions])

    if (locked || !words.length) return null

    if (showGuideQuestion) return <div className="relative">
        <div className="absolute left-[14px] bottom-0">
            <p className="text-[#fff] mb-[10px] bg-[]">推荐问题</p>
            {
                words.map((question, index) => (
                    <div
                        key={index}
                        className="w-fit bg-[#52430c] shadow-md text-[#fff] rounded-md mb-1 px-4 py-1 text-sm cursor-pointer"
                        onClick={() => {
                            setShowGuideQuestion(false)
                            onClick(question)
                        }}
                    >{question}</div>
                ))
            }
        </div>
    </div>


    return null
};