import React, { Fragment, memo, useEffect, useState, useRef } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faArrowUp } from '@fortawesome/free-solid-svg-icons';
export function botonArriba(props) {
    const [estilo, setEstilo] = useState({display: 'none'});
    const scrollUp=()=>{
        let currentScroll = document.documentElement.scrollTop;        
        if (currentScroll > 0){
            window.requestAnimationFrame(scrollUp);
            window.scrollTo(0, currentScroll - (currentScroll/props.Delay)) ;            
        }
    }
    window.onscroll = function () {
        let scroll = document.documentElement.scrollTop;
        if (scroll > props.Visible) {
            //console.log(`scroll pinta :${scroll}`)
            if (estilo.display == 'none') {
                setEstilo({ display: 'unset' });
            }
        } else {
            //console.log(`scroll no pinta :${scroll}`)
            if(estilo.display == 'unset'){
                setEstilo({ display: 'none' })
            }
        }
    }

  return (
    <Fragment>
    <a className="btn btn-floating btn-sm " onClick={()=>scrollUp()} style={estilo} ><i><FontAwesomeIcon icon={faArrowUp}/></i></a>
    </Fragment>
  );
};
export default botonArriba;