Front/src/widgets/header/headerTask/ui/HeaderTask.tsx - master - Rics/JobReady

Front/src/widgets/header/headerTask/ui/HeaderTask.tsx
96 строк4 KB
Rics
add app
16 сен 2025, 16:56
16 сен 2025, 16:5675981cd
import styles from './headerTask.module.scss'
import { Link, useNavigate, useParams } from 'react-router-dom';
import logo from '@shared/assets/logo/logo.png'
import avatar from '@shared/assets/icons/profile.png'
import { UIButton } from "@shared/components";
import {allTasks} from "@/data/allTasks.ts";
import {useState} from "react";
import arrow from '@shared/assets/icons/arrowSmall.png';
import arrowLeft from '@shared/assets/icons/vector.svg';
import random from '@shared/assets/icons/random-svgrepo-com (1) 1.svg';
import arrowRight from '@shared/assets/icons/Vector-1.svg';
import {useCompiler} from "@widgets/Compiler/context/CompilerContext.tsx";

export const HeaderTask = () => {

    const navigate = useNavigate();
    const { id } = useParams();
    const currentIndex = id ? parseInt(id) - 1 : -1;
    const [shuffledIndexes, setShuffledIndexes] = useState<number[] | null>(null);
    const { runCode } = useCompiler();


    const goToTask = (index: number) => {
        if (index >= 0 && index < allTasks.length) {
            navigate(`/tasks/${index + 1}`);
        }
    };

    const handlePrev = () => {
        if (shuffledIndexes) {
            const idx = shuffledIndexes.indexOf(currentIndex);
            if (idx > 0) goToTask(shuffledIndexes[idx - 1]);
        } else {
            goToTask(currentIndex - 1);
        }
    };

    const handleNext = () => {
        if (shuffledIndexes) {
            const idx = shuffledIndexes.indexOf(currentIndex);
            if (idx < shuffledIndexes.length - 1) goToTask(shuffledIndexes[idx + 1]);
        } else {
            goToTask(currentIndex + 1);
        }
    };

    const handleShuffle = () => {
        const indexes = allTasks.map((_, i) => i);
        for (let i = indexes.length - 1; i > 0; i--) {
            const j = Math.floor(Math.random() * (i + 1));
            [indexes[i], indexes[j]] = [indexes[j], indexes[i]];
        }
        setShuffledIndexes(indexes);
        goToTask(indexes[0]);
    };

    return(
        <header className={styles.header}>
            <div className={styles.left}>
                <Link to="/">
                    <img src={logo} className={styles.logo} alt="Логотип" />
                </Link>
                <div className={styles.container}>
                    <Link to="/tasks" className={styles.tasksLink}>
                        <img src={arrow} className={styles.arrow} />
                        Список задач
                    </Link>
                    <div className={styles.buttonContainer}>
                        <button onClick={handlePrev} className={styles.navButton}>
                            <img src={arrowLeft} className={styles.icon}/>
                        </button>
                        <button onClick={handleShuffle} className={styles.navButton}>
                            <img src={random} className={styles.iconRandom}/>
                        </button>
                        <button onClick={handleNext} className={styles.navButton}>
                            <img src={arrowRight} className={styles.icon}/>
                        </button>
                    </div>
                </div>
            </div>

            <div className={styles.center}>
                <UIButton variant="primary" onClick={runCode}>
                    Запустить
                </UIButton>
                <UIButton variant="success">Сохранить</UIButton>
            </div>

            <div className={styles.right}>
                <Link to="/profile">
                    <img src={avatar} className={styles.avatar} alt="Профиль" />
                </Link>
            </div>
        </header>
    )
}