"use client";

import { faSearch } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import clsx from "clsx";
import { useEffect, useMemo, useState } from "react";
import Logo from "./Logo";
import { useRequest } from "ahooks";
import { mRequest } from "../_lib/request";
import { SearchTypeItem, SearchWayItemType } from "../_lib/data/search";
import { doSearch } from "../_lib/utils";
import { log } from "node:console";



export default function Search() {

    const { data: searchWayList = [] } = useRequest(() => mRequest<{ list: SearchWayItemType[] }>('GET', '/api/search?page=1&pageSize=999').then(res => res.list))
    const { data: searchTypeList = [] } = useRequest(() => mRequest<{ list: SearchTypeItem[] }>('GET', '/api/searchType?page=1&pageSize=999').then(res => res.list))
    const [selectKey, setSelectKey] = useState<string | null>(null)
    const [activeSearchKey, setActiveSearchKey] = useState<string | null>(null)
    const [inputStr, setInputStr] = useState('')
    const nowSelectConfig = useMemo(() => {
        const idx = searchTypeList.findIndex(val => val._id === selectKey)
        if (idx !== -1) return searchTypeList[idx]
        else return null
    }, [selectKey, searchTypeList])
    const filterSeachList = useMemo(() => {
        return searchWayList.filter(val => nowSelectConfig?.includes.includes(val._id))
    }, [searchWayList, nowSelectConfig])
    const activeSearch = useMemo(() => {
        const idx = searchWayList.findIndex(val => val._id === activeSearchKey)
        if (idx !== -1) {
            return searchWayList[idx]
        } else {
            return null
        }
    }, [activeSearchKey, searchWayList])

    useEffect(() => {
        if (searchTypeList.length > 0) {
            setSelectKey(searchTypeList[0]._id)

        }
    }, [searchTypeList])
    useEffect(() => {
        if (filterSeachList.length > 0) {
            setActiveSearchKey(filterSeachList[0]._id)
        }
    }, [selectKey])
    return (
        <div className="w-full flex justify-center flex-col  items-center py-10 h-[500px]">

            <div className="w-[200px]">
                <Logo></Logo>
            </div>
            <div className="w-full lg:w-[800px] flex flex-col gap-y-2">
                <div className="flex  w-full justify-center gap-x-5 text-[#666666]">
                    {
                        searchTypeList.map(item => (
                            <div key={item._id}
                                onClick={() => {
                                    setSelectKey(item._id)
                                }}
                                className={clsx(item._id === selectKey ?
                                    "text-[#333]" : "text-[#999] cursor-pointer")}>
                                {item.name}
                            </div>
                        ))
                    }
                </div>
                <div className="w-full relative">
                    <input
                        onKeyDown={(e) => {
                            if (!activeSearch?.value) return
                            if (e.key === 'Enter') {
                                doSearch(activeSearch?.value, inputStr)
                            }

                        }}
                        type="text"
                        onChange={e => {
                            setInputStr(e.target.value)

                        }}
                        placeholder={`${activeSearch?.label}搜索`} className="w-full bg-[#C4C2C6] px-4 h-[50px] rounded-3xl  outline-none" />
                    <FontAwesomeIcon className="text-white absolute top-1/2 -translate-y-1/2 right-6 text-xl" icon={faSearch}></FontAwesomeIcon>
                </div>
                <div className="w-full flex justify-center gap-x-4 ">
                    {
                        filterSeachList.map(item => (
                            <div key={item._id} onClick={() => {
                                setActiveSearchKey(item._id)
                            }} className={clsx(activeSearchKey === item._id ?
                                "text-[#333]" : "text-[#999] cursor-pointer")}>{item.label}</div>
                        ))
                    }
                </div>

            </div>

        </div>
    );
}