import React from 'react';
import { IPropsPagination } from './Pagination.interface';
import Style from './Pagination.style';

export const Pagination: React.FunctionComponent<IPropsPagination> = ({
   total,
   perPage,
   currentPage,
   onChange,
   activeTextColor,
   activeBgColor,
   textColor,
}: IPropsPagination) => {
   const pages: any[] = [];

   let totalPages = parseInt(String(total / perPage + 0.99), 10);

   if (total === perPage) totalPages = 1;

   let start = currentPage - 2;
   let end = currentPage + 1;

   if (currentPage <= 4) {
      start = 0;
      end = 5;
   } else if (totalPages - currentPage <= 3) {
      start = totalPages - 5;
      end = totalPages;
   }

   if (start < 0) {
      start = 0;
   }

   if (end > totalPages) {
      end = totalPages;
   }

   /**
    * Adiciona pagina inicial
    */
   if (start > 1) {
      pages.push({
         id: 1,
         number: 1,
      });
      pages.push({
         id: 'back_p',
         disabled: true,
         number: '...',
      });
   }

   for (let i = start; i < end; i += 1) {
      pages.push({
         id: i + 1,
         active: i + 1 === currentPage,
         number: i + 1,
      });
   }

   /**
    * Adiciona pagina final
    */
   if (totalPages - end >= 2) {
      pages.push({
         id: 'last_p',
         disabled: true,
         number: '...',
      });

      pages.push({
         id: totalPages,
         number: totalPages,
      });
   }

   const last = currentPage !== 1;
   const next = currentPage !== totalPages;

   function setPage(page: any): void {
      if (!page.disabled) onChange(page.number);
   }
   return (
      <>
         {pages && pages.length > 1 && (
            <Style
               data-testid="pagination"
               activeTextColor={activeTextColor}
               activeBgColor={activeBgColor}
               textColor={textColor}
            >
               <div className="pagination">
                  {currentPage > 1 && (
                     <div
                        onClick={() => onChange(currentPage - 1)}
                        className={`page ${last && 'hidden'}`}
                        data-testid="page-back"
                     >
                        {'<'}
                     </div>
                  )}

                  {pages.map((page) => {
                     return (
                        <div
                           className={`page ${page.number === currentPage && ' active '}${
                              page.disabled && ' disabled '
                           }`}
                           onClick={() => setPage(page)}
                           key={page.id}
                           data-testid={`page-${page.id}`}
                        >
                           {page.number}
                        </div>
                     );
                  })}

                  {currentPage !== totalPages && (
                     <div
                        onClick={() => onChange(currentPage + 1)}
                        className={`page ${next && 'hidden'}`}
                        data-testid="page-next"
                     >
                        {'>'}
                     </div>
                  )}
               </div>
            </Style>
         )}
      </>
   );
};
