import React, { useCallback, useEffect, useRef, useState } from 'react';
import AnimatedNumber from 'react-animated-number';
import { faExclamationCircle, faRedo, faTimes, faUndo } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import classNames from 'classnames';
import { ICardImageUploadSortableInterface } from './CardImageUploadSortable.interface';
import * as S from './CardImageUploadSortable.style';

export const CardImageUploadSortable = React.memo(function CardImageUploadSortable({
   dragging,
   dragOverlay,
   value,
   index,
   onRetry,
   listeners,
   disabled,
   onRotate,
   onRemove,
   ...rest
}: ICardImageUploadSortableInterface) {
   const formatValue = useCallback((n) => n.toFixed(0), []);

   function rotateImage(a): void {
      let angle = value.rotate ?? 0;
      angle += a;

      if (onRotate) onRotate(angle, value);
   }

   return (
      <S.ImageContainer disabled={disabled} {...rest}>
         <div className={classNames('item', dragging && 'dragging', dragOverlay && 'dragOverlay')} {...listeners}>
            <div
               className="cover"
               style={{ backgroundImage: `url(${value.image})`, transform: `rotate(${value.rotate}deg)` }}
            />
         </div>

         {!dragging && (
            <>
               <div className="icon-close" data-testid="remove" onClick={() => onRemove && onRemove(value)}>
                  <FontAwesomeIcon icon={faTimes} />
               </div>
               <div className="icon-rotate-left" data-testid="rotate-left" onClick={() => rotateImage(-90)}>
                  <FontAwesomeIcon icon={faUndo} />
               </div>
               <div className="icon-rotate-right" data-testid="rotate-right" onClick={() => rotateImage(90)}>
                  <FontAwesomeIcon icon={faRedo} />
               </div>
            </>
         )}

         {value.loading && !value.error && (
            <div className="loading">
               <div className="progress-loading">
                  <div className="value">
                     <AnimatedNumber value={value.percentage} duration={200} formatValue={formatValue} />%
                  </div>
                  <div className="load-bar">
                     <div
                        className="load-bar-finish"
                        style={{
                           width: `${value.percentage}%`,
                        }}
                     />
                  </div>
               </div>
            </div>
         )}

         {value.error && (
            <div className="error-container">
               <div className="error">
                  <FontAwesomeIcon icon={faExclamationCircle} />
                  &nbsp; Erro ao fazer upload
                  <button onClick={() => onRetry && onRetry(value)} type="button">
                     Tentar novamente
                  </button>
               </div>
            </div>
         )}
      </S.ImageContainer>
   );
});
