import React, { useState, useEffect } from 'react';
import { useLocalStorage } from '../components/Util/Hooks/useLocalStorage.jsx';
import '../scss/shortcut-selector.scss';
import ShorcutsSelectorItem from './ShorcutsSelectorItem.jsx';
import LocalStorage from '../components/Util/localStorage/index.jsx';

const ShorcutsSelector = (props) => {
    var clicks = [];
    var time = "";

    const [filteredData, setFilteredData] = useState([...props.sistemasUsuario.modules]);
    const [currentSelected, setCurrentSelected] = useState(0);
    const [editableMode, setEditableMode] = useState(false);
    const [favorites, setFavorites] = useLocalStorage('favoritos', []);
    const Local = new LocalStorage();
    let _editableModeTimer;

    let tim;

    useEffect(() => {
        obtenerFavoritos();
    }, [props.sistemasUsuario.modules]);


    const handleBodyClick = (e) => {
        if(currentSelected === -1){
            let favoritosLocal = Local.get("favoritos");
            let tArr = [...props.sistemasUsuario.modules];
            tArr = tArr.filter((item) => favoritosLocal.includes(item.id))
            setFilteredData([...tArr]);
        }
        document.body.removeEventListener('click', handleBodyClick, !1);
        setEditableMode(false);
    }

    const obtenerFavoritos = () => {
        let _Fav = [];
        let pDatos = props.sistemasUsuario.modules;

        for (let j = 0; j < pDatos.length; j++) {
            if (pDatos[j].favorito == true) {
                _Fav.push(pDatos[j].id);
            }
        }
        _Fav.sort();

        let tArr = [...props.sistemasUsuario.modules];

        if (_Fav.length > 0) {
            tArr = tArr.filter((item) => _Fav.includes(item.id))
            setCurrentSelected(-1);
        } else {
            setCurrentSelected(0)
        }

        setFilteredData(tArr);
        setFavorites(_Fav);
    }

    const handleDoubleClick = (e, pItem) => {
        clicks.push(new Date().getTime());

        window.clearTimeout(time);
        time = window.setTimeout(() => {
            if (clicks.length > 1 && (clicks[clicks.length - 1] - clicks[clicks.length - 2]) < 500) {
                abrirUrl(pItem.url); 
            }
        }, 500);
    }

    const abrirUrl = (pUrl) => {
        let win = window.open(pUrl, '_blank');
        win.focus();
    }
    const evalEditableMode = (_e) => {
        if (_e.nativeEvent.type === 'mousedown' || _e.nativeEvent.type === 'touchstart') {
            _editableModeTimer = setTimeout(() => {
                document.body.addEventListener('click', handleBodyClick, !1);
                setEditableMode(true);
            }, 1500)
        } else {
            clearTimeout(_editableModeTimer);
            if (!editableMode) {
            }
        }
    };

    const drop = async (ev) => {
        ev.preventDefault();
        let myData = JSON.parse(ev.dataTransfer.getData("text"));
        await saveToFavorites(myData.id);
    };

    const saveToFavorites = async (_id) => {
        await props.guarda_Favorito(_id);
        let tArr = [...favorites];
        !tArr.includes(_id) && tArr.push(_id);
        tArr.sort();
        setFavorites(tArr);
    };
    
    const removeFromFavorites = async (_id) => {
        await props.eliminar_Favorito(_id);
        let tArr = [...favorites];
        tArr = tArr.filter(item => item !== _id && _id);
        tArr.sort();
        setFavorites(tArr);
    }

    const handleChangeModule = (_n, _s) => {
        setEditableMode(false);
        const btns = document.querySelectorAll('.shortcut-selector-mods button');

        btns.forEach((item, index) => item.classList.add('out'));
        tim = setTimeout(() => {
            if (_n === 0) {
                setFilteredData([...props.sistemasUsuario.modules]);
            } else if (isNaN(_n)) {
                let tArr = [...props.sistemasUsuario.modules];
                tArr = tArr.filter((item) => item.cat === _n);
                setFilteredData(tArr);
            } else if (_n === -1) {
                let tArr = [...props.sistemasUsuario.modules];
                tArr = tArr.filter((item) => favorites.includes(item.id))
                setFilteredData([...tArr]);
            }
            setCurrentSelected(_s);
            btns.forEach((item, index) => item.classList.remove('out'));
        }, 200);
    };

    const handleChangeCb = () => {
        let categoria, indice, value = document.getElementById("cbModules").value;
        let arr = value.split(',');

        if (arr.length > 1) {
            categoria = arr[0]; indice = parseInt(arr[1]);
        } else {
            if (parseInt(arr[0]) === 0) {
                categoria = 0; indice = 0;
            } else if (parseInt(arr[0]) === -1) {
                categoria = -1; indice = -1;
            }
        }

        handleChangeModule(categoria, indice);
    }

    return <div className='shortcut-selector'>

        <div className='cb-shortcut-selector-cats px-5'>
            <select onChange={() => handleChangeCb()} className='form-select mt-2 mb-4' id="cbModules">
                <option selected={currentSelected === 0 ? true : false} value="0">Todos</option>

                {props.sistemasUsuario.categories.length > 1 && <>
                    {
                        props.sistemasUsuario.categories.map((item, index) => <option
                            key={index}
                            value={`${item},${index + 1}`}
                            selected={currentSelected === index + 1 ? true : false}
                        >
                            {item}
                        </option>)
                    }
                </>}

                <option selected={currentSelected === -1 ? true : false} value="-1">Favoritos</option>
            </select>
        </div>

        <div className='shortcut-selector-cats'>

            {/**
                         {favorites.length > 0 ?
                <>
                    <button
                        className={currentSelected === -1 ? 'selected' : ''}
                        onClick={() => handleChangeModule(-1, -1)}
                        onDrop={(e) => drop(e)}
                        onDragOver={(ev) => ev.preventDefault()}
                    >Favoritos</button>
                    <button className={currentSelected === 0 ? 'selected' : ''} onClick={() => handleChangeModule(0, 0)}>Todos</button>
                </>
                :
                <>
                    <button className={currentSelected === 0 ? 'selected' : ''} onClick={() => handleChangeModule(0, 0)}>Todos</button>
                </>
            }
             */}

            <button
                className={currentSelected === -1 ? 'selected' : ''}
                onClick={() => handleChangeModule(-1, -1)}
                onDrop={(e) => drop(e)}
                onDragOver={(ev) => ev.preventDefault()}
            >Favoritos</button>
            <button className={currentSelected === 0 ? 'selected' : ''} onClick={() => handleChangeModule(0, 0)}>Todos</button>

            {props.sistemasUsuario.categories.length > 1 && <>
                {
                    props.sistemasUsuario.categories.map((item, index) => <button
                        key={index}
                        className={currentSelected === index + 1 ? 'selected' : ''}
                        onClick={() => handleChangeModule(item, index + 1)}
                    >
                        {item}
                    </button>)
                }
            </>}

            {/**
                         {favorites.length === 0 &&
                <>
                    <button
                        className={currentSelected === -1 ? 'selected' : ''}
                        onClick={() => handleChangeModule(-1, -1)}
                        onDrop={(e) => drop(e)}
                        onDragOver={(ev) => ev.preventDefault()}
                    >Favoritos</button>
                </>
            }
             */}

        </div>

        {/*{filteredData !== undefined && <>*/}

        <div className='shortcut-selector-mods'>{
            filteredData.map((item, index) => <ShorcutsSelectorItem
                key={index}
                item={item}
                ico={item.imagen}
                isFavorite={favorites.includes(item.id)}
                evalEditableMode={evalEditableMode}
                editableMode={editableMode}
                saveToFavorites={() => saveToFavorites(item.id)}
                removeFromFavorites={() => removeFromFavorites(item.id)}
                onDoubleClick={handleDoubleClick}
            />)
        }</div>

        {/*</>}*/}

    </div>
}

export default ShorcutsSelector