import styles from './styles.module.scss';
import {useEffect} from "react";
import {NavLink, useLocation} from "react-router-dom";
import {useSelector} from "react-redux";
import {getRoute, getRouteChain} from "@features/mainSlice";
import symbol from '@assets/symbol-defs.svg';
import {useThemeProvider} from "@contexts/themeContext";
import SvgIcon from "@components/SvgIcon";
const i18n=global.i18n;
const BreadCrumb=()=>{
    const {isMobile,showHeader,setShowHeader} = useThemeProvider();
    const {pathname} = useLocation();
    const chain=useSelector(getRouteChain(pathname));
    const currRoute=useSelector(getRoute(pathname));

    useEffect(() => {
    }, [pathname]);
    const renderDesktop=()=>{
        let len=chain.length;
        if (len<=1)return (<></>);
        return (
            <div className={styles.container}>
                <div className={styles.game_nav_path}>
                    {
                        chain.map((item,index)=>{
                            let end=index===len-1;
                            return (
                                <>
                                    <NavLink key={index} to={`${!end?item.path:''}`}  className={`${!end?styles.nav_hover:styles.nav_active}`}>
                                        <span>{i18n.t(item.title)}</span>
                                    </NavLink>
                                    {
                                        !end?(
                                            <svg className={styles.icon} key={"arrow_"+index}>
                                                <use xlinkHref={`${symbol}#icon_Arrow`} />
                                            </svg>
                                        ):(<></>)
                                    }
                                </>
                            )
                        })
                    }
                </div>
            </div>
        )
    }
    const renderMobile=()=>{
        let len=chain.length;
        if (len<=1){
            return (<></>);
        }
        return (
            <div className={styles.container_m}>
                <div className={styles.game_nav_path}>
                    <NavLink to={currRoute.ppath}>
                        <SvgIcon className={styles.icon} herf={"icon_Arrow"}/>
                        {i18n.t(currRoute.title)}
                    </NavLink>
                </div>
            </div>
        )
    }
    const renderBreadCrumb=()=>{
        return isMobile()?renderMobile():renderDesktop();
    }
    return (
        <>
            {
                renderBreadCrumb()
            }
        </>
    )
}
export default BreadCrumb;