import { useState, useEffect, useRef } from 'react';
import '../Styles/Hero.css';

function Hero() {
    // USE REF SETTINGS
    const activeItem = useRef([]);
    const toggleTarget = useRef(false);
    const targetObject = useRef({
        id: "",
        active: false,
    });
    const boxCustomRef = useRef(null);

    // BOXES AMOUNT 
    const boxesAmout = 160;
    const updatedItemArray = []

    // Create new Array based on boxesAmount
    const itemArr = new Array(boxesAmout).fill(0);

    // FOR LOOP => iterate over each item
    // => push item w/ index as id in updatedItemArray
    for (let i = 0; i < itemArr.length; i++) {
        updatedItemArray.push({
            id: itemArr[i] = i
        })
    };


    const toggleBoxHandler = (event) => {
        // id of clicked element
        let targetId = parseInt(event.target.id);

        // new Arr based on previous elements
        let prevArr = [...activeItem.current];

        // current Object to push in array
        targetObject.current = {
            id: targetId,
            active: toggleTarget.current,
        };

        // if Arr is empty => push first element
        if ((activeItem.current.length === 0) && (targetObject.current.active === false)) {
            targetObject.current = {
                id: targetId,
                active: true
            }
            activeItem.current = [...prevArr, targetObject.current];
            console.log("first item");
            console.log(activeItem.current);
            // add active class
            event.target.className = "hero__grid__box--overlay--default hero__grid__box--overlay--isActive"
        }
        //
        // IF ARR IS NOT EMPTY => logic goes here
        //
        // FIRST => check if target id is already included in previous Arr
        // -> if not: push new targetObject / toggle active state
        // -> if yes: remove item from Arr / edit new targetObject & toggle active state / push updated item back in Arr
        //
        else if (activeItem.current.length > 0) {
            console.log("arr includes at least one item");

            // loop over prevArr
            for (let i = 0; i < prevArr.length; i++) {

                // if prevArr doesn't include targetId
                if (prevArr[i].id !== targetId) {
                    console.log("it's not a match!");

                    //
                    // activeState default is false
                    // => set State to true
                    // => hydrate current Arr with current targetObject
                    // => toggle active class
                    //
                    targetObject.current = {
                        id: targetId,
                        active: true
                    }

                    activeItem.current = [...prevArr, targetObject.current];

                    // add active class
                    event.target.className = "hero__grid__box--overlay--default hero__grid__box--overlay--isActive";
                }
                // if prevArr includes targetId
                // Remove & replace item from prevArr => update its active State / push updated item back in Arr
                if (prevArr[i].id === targetId) {
                    console.log("arr already include this item");
                    // console.log(prevArr[i].id);
                    let updatedArr;
                    let updatedItem = {
                        id: "",
                        active: "",
                    };

                    // FILTER & CREATE new Array w/ item to update
                    const filteredItem = prevArr.filter((item) => item.id === targetId);

                    // FILTER & CREATE new Array without item to update
                    const filteredArr = prevArr.filter(item => item.id !== targetId);
                    console.log(filteredArr);

                    // Updates filtered item
                    updatedItem = {
                        id: filteredItem[0].id,
                        active: !filteredItem[0].active
                    }

                    // UPDATE prevArr w/ correct active value
                    prevArr = [...filteredArr, updatedItem];

                    // IF state is true => add class active
                    if (updatedItem.active === true) {
                        event.target.className = "hero__grid__box--overlay--default hero__grid__box--overlay--isActive"
                    }
                    // IF state is false => remove class active
                    if (updatedItem.active === false) {
                        event.target.className = "hero__grid__box--overlay--default hero__grid__box--overlay--notActive"
                    }

                    // HYDRATE current array w/ updated previous values
                    activeItem.current = [...prevArr];
                    return;
                }
            }
        }
    }


    return (
        <div className="section__container hero__container">
            <div className='hero__grid__container'>
                <div className='hero__grid__container__background'></div>
                {
                    updatedItemArray.map((item) => {
                        return (
                            <div key={item.id} id={item.id} ref={boxCustomRef} className='hero__grid__box'>
                                <div id={item.id} className='hero__grid__box--overlay--default hero__grid__box--overlay--notActive' onClick={toggleBoxHandler}></div>
                            </div>
                        )
                    })
                }
            </div>
        </div>
    );
}

export default Hero;