import {useThemeProvider} from "@contexts/themeContext";
import styles from "./styles.module.scss";
import {useSidebar} from "@contexts/sidebarContext";
import {animated,easings} from "@react-spring/web";
import {useSpring} from "@react-spring/core";
import React, {useState,useEffect} from "react";
import symbol from '@assets/symbol-defs.svg';
const i18n=global.i18n;

const GameSearchPanel=()=>{
    const {open} = useSidebar();
    const {isShowSearch,searchData,showGameSearchPanel,isMobile} = useThemeProvider();
    const sideleft=open?'var(--side-open)':'var(--side-close)';
    const left=isMobile()?'0px':sideleft;
    const [show,setShow]=useState(false);
    const [inputFocus,setInputFocus]=useState(false);
    const [inputValue, setInputValue] = useState('');
    const duration=200;
    var timer=null;
    useEffect(() => {
        if(setShow)setShow(isShowSearch);
    }, [isShowSearch])
    useEffect(()=>{
        return () => {
            if (timer!=null)clearTimeout(timer);
        };
    },[])
    const deskAni=useSpring({
        from: {transform: 'translateY(-100%) translateZ(0px)'},
        transform:show?'translateY(0%) translateZ(0px)':'translateY(-100%) translateZ(0px)',
        config: {
            duration:duration,
        }
    });
    const hidePanel=()=>{
        setInputValue("");
        setShow(false);
        timer=setTimeout(()=>{
            if (showGameSearchPanel)showGameSearchPanel(false,null);
        },duration);
    }
    const renderInput=()=>{
        return (
            <div className={`${styles.search_input_wrap} ${inputFocus?styles.focus:''}`}>
                <div className={styles.input_before}>
                    <svg className={styles.icon}>
                        <use xlinkHref={`${symbol}#icon_Search`} />
                    </svg>
                </div>
                <input
                    onFocus={(e)=>{
                        setInputFocus(true);
                    }}
                    onBlur={(e)=>{
                        setInputFocus(false);
                    }}
                    value={inputValue}
                    onChange={(e) => setInputValue(e.target.value)}
                    // autoFocus={true}
                    className={styles.search_input} type="text" placeholder={i18n.t("game_search.input_ph")}/>
                {
                    inputValue==""?(<></>):(
                        <button className={styles.clear_btn} onClick={()=>{
                            setInputValue("");
                        }}>
                            <svg className={styles.icon}>
                                <use xlinkHref={`${symbol}#icon_Close`} />
                            </svg>
                        </button>
                    )
                }
                <div className={styles.input_after} onClick={()=>{
                    hidePanel();
                }}>
                    <p>{i18n.t("game_search.cancel")}</p>
                </div>
            </div>
        )
    }
    const renderDesktop=()=>{
        return (
            <animated.div className={styles.search_panel} style={deskAni} onClick={(event)=>{
                event.stopPropagation();
            }}>
                <div className={`${styles.search_panel_container}`}>
                    {renderInput()}
                </div>
            </animated.div>
        )
    }
    const renderMobile=()=>{
        return (<></>)
    }
    const renderPanel=()=>{
        if (!isShowSearch)return (<></>);
        return (
            <div onClick={()=>{
                hidePanel();
            }} className={`${styles.search_container}`} style={{top:"var(--header-active)",left:left}}>
                {
                    isMobile()?renderMobile():renderDesktop()
                }
            </div>
        )
    }
    return (
        <>
            {
                renderPanel()
            }
        </>
    )
}
export default GameSearchPanel;
