import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
import { useEventListener } from '@devesharp/react-hooks';
import { faChevronLeft } from '@fortawesome/free-solid-svg-icons/faChevronLeft';
import { faChevronRight } from '@fortawesome/free-solid-svg-icons/faChevronRight';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { ISlider } from './Slider.interface';
import * as S from './Slider.style';

export const Slider = function Slider({
   items,
   height = 300,
   width = '100%',
   boxCountPos = 'top-left',
   showBoxCount = true,
   onChangeSlide,
   arrowSize = 50,
   onClickImage,
   onRequestClose,
   bgColor = '#222',
   slidePos: _slidePos,
}: ISlider): React.ReactElement {
   const [slidePos, setSlidePos] = useState(0);

   useLayoutEffect(() => {
      if (_slidePos && _slidePos >= 0) {
         setSlidePos(_slidePos as number);
      }
   }, [_slidePos]);

   function nextSlide(): void {
      if (slidePos + 1 >= items.length) {
         if (onChangeSlide) onChangeSlide(0);
         setSlidePos(0);
      } else {
         if (onChangeSlide) onChangeSlide(slidePos + 1);
         setSlidePos(slidePos + 1);
      }
   }

   function previousSlide(): void {
      if (slidePos - 1 < 0) {
         if (onChangeSlide) onChangeSlide(items.length - 1);
         setSlidePos(items.length - 1);
      } else {
         if (onChangeSlide) onChangeSlide(slidePos - 1);
         setSlidePos(slidePos - 1);
      }
   }

   useEventListener('keydown.esc', () => {
      if (onRequestClose) onRequestClose();
   });

   useEventListener('keydown.arrowleft', () => {
      previousSlide();
   });

   useEventListener('keydown.arrowright', () => {
      nextSlide();
   });

   return (
      <S.Container
         bgColor={bgColor}
         arrowSize={arrowSize}
         height={typeof height === 'string' ? height : `${height}px`}
         width={typeof width === 'string' ? width : `${width}px`}
         boxCountPos={boxCountPos}
      >
         {showBoxCount && (
            <div className="image-count" onClick={() => onClickImage && onClickImage()}>
               <span>{slidePos + 1}</span> de <span>{items.length}</span>
            </div>
         )}
         <div className="arrow left" onClick={previousSlide} data-testid="slider-btn-left">
            <FontAwesomeIcon icon={faChevronLeft} />
         </div>
         <div className="arrow right" onClick={nextSlide} data-testid="slider-btn-right">
            <FontAwesomeIcon icon={faChevronRight} />
         </div>
         <div className="main">
            <ul className="full-screen-slider" style={{ transform: `translateX(-${slidePos * 100}%)` }}>
               {!!items &&
                  items.map((Image: any, index) => (
                     <li key={`image-slide-${index}`}>
                        {!!Image?.image && (
                           <>
                              <div
                                 className="overlay"
                                 onClick={() => onRequestClose && onRequestClose()}
                                 data-testid={`slider-background-${index}`}
                              />
                              <img
                                 src={Image.image}
                                 className={`rot${Image.rotate}`}
                                 alt=""
                                 onClick={() => onClickImage && onClickImage()}
                              />
                           </>
                        )}
                        {!Image?.image && typeof Image === 'function' && <Image />}
                        {!Image?.image && typeof Image !== 'function' && Image}
                     </li>
                  ))}
            </ul>
         </div>
      </S.Container>
   );
};
