'use client';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import styles from './Navigation.module.css';
import Image from 'next/image';
import { useEffect, useState } from 'react';
import { usePlayerStore } from '@/store/player.state';
import { useTasksStore } from '@/store/tasks.state';
import { ProvidersProps } from '@/components/providers/Providers';

const Navigation = ({ id }: Pick<ProvidersProps, 'id'>) => {
    const pathname = usePathname();

    const { player } = usePlayerStore();
    const [isLoading, setIsLoading] = useState<boolean>(true);

    const { tasks } = useTasksStore();
    const countTasks = tasks.length - (player?.attributes.finished_tasks.data?.length || 0);

    useEffect(() => {
        if (isLoading) {
            setIsLoading(false);
        }
    }, [isLoading]);

    const getNavLink = (endpoint: string) => {
        return `/${id}/${endpoint}`;
    };

    return (
        <div className={styles.container}>
            <Link href={getNavLink('home')} style={{ textDecoration: 'none' }}>
                <div className={pathname === '/' ? styles.active_nav_menu : styles.nav_menu}>
                    {pathname === '/' ? (
                        <Image
                            src={'/icons/pickaxe-icon-selected.svg'}
                            alt={'pickaxe-icon'}
                            width={24}
                            height={24}
                        />
                    ) : (
                        <Image
                            src={'/icons/pickaxe-icon.svg'}
                            alt={'pickaxe-icon'}
                            width={24}
                            height={24}
                        />
                    )}
                    <span>Главная</span>
                </div>
            </Link>
            <Link href={getNavLink('shop')} style={{ textDecoration: 'none' }}>
                <div className={pathname === '/shop' ? styles.active_nav_menu : styles.nav_menu}>
                    {pathname === '/shop' ? (
                        <Image
                            src={'/icons/shop-icon-selected.svg'}
                            alt={'shop-icon'}
                            width={24}
                            height={24}
                        />
                    ) : (
                        <Image
                            src={'/icons/shop-icon.svg'}
                            alt={'shop-icon'}
                            width={24}
                            height={24}
                        />
                    )}
                    <span>Магазин</span>
                </div>
            </Link>
            <Link
                href={getNavLink('tasks')}
                style={{ textDecoration: 'none', position: 'relative', height: '82px' }}
            >
                {countTasks !== 0 && <div className={styles.countTasks}>{countTasks}</div>}
                <div
                    className={
                        pathname === '/tasks'
                            ? `${styles.active_nav_menu} ${styles.task}`
                            : `${styles.nav_menu} ${styles.task}`
                    }
                >
                    {pathname === '/tasks' ? (
                        <Image
                            src={'/icons/task-list-icon-selected.svg'}
                            alt={'task-list-icon'}
                            width={24}
                            height={24}
                        />
                    ) : (
                        <Image
                            src={'/icons/task-list-icon.svg'}
                            alt={'task-list-icon'}
                            width={24}
                            height={24}
                        />
                    )}
                    <span>Задания</span>
                </div>
            </Link>
            <Link href={getNavLink('friends')} style={{ textDecoration: 'none' }}>
                <div className={pathname === '/friends' ? styles.active_nav_menu : styles.nav_menu}>
                    {pathname === '/friends' ? (
                        <Image
                            src={'/icons/friends-icon-selected.svg'}
                            alt={'friends-icon'}
                            width={24}
                            height={24}
                        />
                    ) : (
                        <Image
                            src={'/icons/friends-icon.svg'}
                            alt={'friends-icon'}
                            width={24}
                            height={24}
                        />
                    )}
                    <span>Друзья</span>
                </div>
            </Link>
        </div>
    );
};

export default Navigation;