import React, { type ReactNode } from 'react';
import Carousel from 'react-multi-carousel';

type SelectionItemNavigationProps = {
   children: ReactNode | ReactNode[];
   numberOfDisplayedItems: number;
   moveBy: number;
};

function CustomLeftArrow({ onClick, ..._rest }) {
   return (
      <button
         onClick={onClick}
         className={`btn btn-nav ${!MODULES.COMPONENTS ? 'align-icons' : ''}`}
         dangerouslySetInnerHTML={{
            __html: MODULES.COMPONENTS
               ? require('@assets/icons/caret-left.svg?raw')
               : '<i class="fc icons_caret-left"></i>',
         }}
      />
   );
}

function CustomRightArrow({ onClick, ..._rest }) {
   return (
      <button
         onClick={onClick}
         className={`btn btn-nav right ${!MODULES.COMPONENTS ? 'align-icons' : ''}`}
         dangerouslySetInnerHTML={{
            __html: MODULES.COMPONENTS
               ? require('@assets/icons/caret-right.svg?raw')
               : '<i class="fc icons_caret-right"></i>',
         }}
      />
   );
}

export function ItemNavigation({
   children,
   moveBy,
   numberOfDisplayedItems,
}: SelectionItemNavigationProps) {
   const partialVisibilityGutter = Array.isArray(children) && children.length > numberOfDisplayedItems ? 40 : 0;
   const responsive = {
      desktop: {
         breakpoint: { max: 4000, min: 1024 },
         items: numberOfDisplayedItems,
         partialVisibilityGutter,
      },
      tablet: {
         breakpoint: { max: 1024, min: 543 },
         items: numberOfDisplayedItems,
         partialVisibilityGutter,
      },
      mobile: {
         breakpoint: { max: 543, min: 0 },
         items: 1,
         partialVisibilityGutter: Array.isArray(children) && children.length > 1 ? 30 : 0,
         slidesToSlide: 1,
      }
   };

   return (
      <div className="jsmultisets-selection-item-navigation">
         <Carousel
            infinite={false}
            transitionDuration={300}
            partialVisible
            // @ts-expect-error TS2741
            customLeftArrow={<CustomLeftArrow />}
            // @ts-expect-error TS2741
            customRightArrow={<CustomRightArrow />}
            slidesToSlide={moveBy}
            responsive={responsive}
         >
            {children}
         </Carousel>
      </div>
   );
}
