'use client';
import clsx from 'clsx';
import { useState } from 'react';
import { MdKeyboardArrowLeft, MdKeyboardArrowRight } from 'react-icons/md';
import { Each, Show } from '../../00-base';
/**
 * Pagination component for rendering pagination controls.
 *
 * @component
 * @example
 * // Example usage of Pagination component
 * <Pagination
 *   currentPage={1}
 *   pageChange={(page, itemsPerPage) => console.log(page, itemsPerPage)}
 *   itemsPerPage={[10, 20, 30]}
 *   totalItems={100}
 *   disableNavigation={false}
 *   disabledNext={false}
 * />
 *
 * @param {Object} props - The properties of the Pagination component.
 * @param {number} props.currentPage - The current active page.
 * @param {Function} props.pageChange - Callback function triggered when the page changes.
 * @param {number[]} [props.itemsPerPage] - Array of items per page options.
 * @param {number} [props.totalItems=0] - Total number of items.
 * @param {boolean} [props.disableNavigation=false] - Whether to disable navigation buttons.
 * @param {boolean} [props.disabledNext=false] - Whether to disable the next button.
 * @param {Object} [props.restProps] - Additional HTML attributes for the container div.
 *
 * @returns {ReactNode} The rendered Pagination component.
 */
export function Pagination({ currentPage, pageChange, itemsPerPage, totalItems = 0, disableNavigation = false, disabledNext = false, ...restProps }) {
    const [itemsPerPageValue, setItemsPerPageValue] = useState((itemsPerPage?.length && itemsPerPage[0]) || 0);
    const totalPages = Math.ceil(totalItems / itemsPerPageValue);
    const visiblePages = 5;
    let start = Math.max(1, currentPage - Math.floor(visiblePages / 2));
    let end = Math.min(totalPages, start + visiblePages - 1);
    if (end - start < visiblePages - 1) {
        start = Math.max(1, end - visiblePages + 1);
    }
    const ellipsisStyleMap = clsx('block text-center leading-8');
    const buttonStyleMap = clsx('min-h-8 min-w-8 rounded-sm px-2 font-semibold transition-colors', 'not-disabled:hover:bg-black not-disabled:hover:text-white', 'dark:not-disabled:hover:bg-white dark:not-disabled:hover:text-black');
    const handlerPageChange = (page) => {
        pageChange(page, itemsPerPageValue);
    };
    const handlerItemsPerPageChange = (value) => {
        setItemsPerPageValue(value);
        pageChange(1, value);
    };
    return (<div {...restProps} className={clsx('flex items-center gap-2', restProps.className)}>
      {!!itemsPerPage && itemsPerPage.length > 1 && (<>
          <div>
            <span className="text-xs">Ítems por página</span>
          </div>
          <div>
            <select className="h-8 rounded-full border bg-transparent px-3.5 text-sm font-normal text-black outline-0" value={itemsPerPageValue} onChange={(e) => handlerItemsPerPageChange(Number(e.target.value))}>
              <Each of={itemsPerPage} render={(item) => (<option key={item} value={item}>
                    {item}
                  </option>)}/>
            </select>
          </div>
        </>)}
      <div className="flex items-center gap-2">
        <button onClick={() => handlerPageChange(currentPage - 1)} disabled={currentPage <= 1 || disableNavigation} className={clsx(buttonStyleMap, 'w-8 px-0 text-2xl')}>
          <MdKeyboardArrowLeft className="w-full"/>
        </button>
        <Show>
          <Show.When isTrue={!totalItems || !itemsPerPageValue || totalPages <= 1}>
            <span key={currentPage} className="font-semibold transition-colors">
              {currentPage}
            </span>
          </Show.When>
          <Show.Else>
            {start > 1 && (<>
                <button key={1} onClick={() => handlerPageChange(1)} className={buttonStyleMap} disabled={disableNavigation}>
                  1
                </button>
                {start > 2 && (<span key="ellipsis1" className={ellipsisStyleMap}>
                    ...
                  </span>)}
              </>)}
            <Each of={Array.from({ length: end - start + 1 }, (_, index) => start + index)} render={(i) => (<button key={i} className={clsx(buttonStyleMap, currentPage === i &&
                'cursor-default bg-black text-white dark:bg-white dark:text-black')} onClick={() => handlerPageChange(i)} disabled={currentPage === i || disableNavigation}>
                  {i}
                </button>)}/>
            {end < totalPages && (<>
                {end < totalPages - 1 && (<span key="ellipsis2" className={ellipsisStyleMap}>
                    ...
                  </span>)}
                <button key={totalPages} onClick={() => handlerPageChange(totalPages)} className={buttonStyleMap} disabled={disableNavigation}>
                  {totalPages}
                </button>
              </>)}
          </Show.Else>
        </Show>
        <button onClick={() => handlerPageChange(currentPage + 1)} disabled={currentPage === totalPages || disableNavigation || disabledNext} className={clsx(buttonStyleMap, 'w-8 px-0 text-2xl')}>
          <MdKeyboardArrowRight className="w-full"/>
        </button>
      </div>
    </div>);
}
//# sourceMappingURL=Pagination.jsx.map