import type {
   SidebarToggleFunc,
   Product,
   SelectionProduct,
} from '@assets/js-multisets/common/types';
import * as React from 'react';

type SelectionItemProps = {
   data: Product;
   categoryId: number;
   row: number;
   isChecked: boolean;
   onSidebarToggle: SidebarToggleFunc;
   activeFocusVariation?: number;
};

export function SelectionItem(props: SelectionItemProps) {
   const product: SelectionProduct = {
      ...props.data,
      row: props.row,
   };

   const activeImage = props.activeFocusVariation
      ? props.data.photos.find((photo) => photo.variationId === props.activeFocusVariation)
      : props.data.photo;

   return (
      <div className={`item ${props.isChecked ? 'item-selected' : ''}`}>
         <a
            role="button"
            title={props.data.title}
            onClick={(e) => props.onSidebarToggle(e, product, product.row, props.categoryId)}>
            {props.isChecked && (
               <span
                  className="item-selected-icon"
                  dangerouslySetInnerHTML={{
                     __html: MODULES.COMPONENTS
                        ? require('@assets/icons/check.svg?raw')
                        : '<i class="fc icons_check"></i>',
                  }}
               />
            )}
            <div className="img-wrapper">
               <img src={activeImage?.source ?? props.data.photo.source} className="img-responsive" alt={props.data.title} />
            </div>
            <span>{props.data.title}</span>
         </a>
      </div>
   );
}
