import React, { useEffect, useState } from "react";
import './scroll-top.css';
import Iconsvg from '../Icon/Icon';


type Props = {
    buttonLabel?: string,
    labelShow?: boolean,
    iconName: any,
    icon: boolean,
    color?: 'dark' |'white' |'primary' | 'secondary',
    variant?: 'default' |'primary' | 'secondary',
    size?: 'default' | 'small' | 'medium' | 'large',
    borderRadious?: 'default' | 'small' | 'medium' | 'large',
    show: boolean,
    scrollToTop: (event:any) => void;
}


const ScrollTop = (props:Props) => {
    const {buttonLabel, iconName, icon, variant,color, size,show, borderRadious,labelShow, scrollToTop} = props;
    const [showButton, setShowButton] = useState(show);
    useEffect(() => {
        if(!show){
            setShowButton(true);
        } else {
            window.addEventListener("scroll", () => {
              if (window.pageYOffset > 300) {
                setShowButton(true);
              } else {
                setShowButton(false);
              }
            });
        }
      }, []);
    return (
        <>
        {showButton && <div onClick={scrollToTop} className={`back-button ${variant ? `btn-${variant}` : ''} ${size ? `btn-size-${size}` : ''}`}>
            <button type="button" className={`${color ? `color-${color}` : ''} ${borderRadious ? `rounded-${borderRadious}` : ''}`}>
              {icon && <Iconsvg name={iconName}/>}  {labelShow && buttonLabel}
            </button>
        </div>
        }
        </>
    );
}

export default ScrollTop;