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

export type SelectionProduct = SelectionProduct_ & {
   is_valid: boolean;
   rowId: number;
};

type SelectionItemProps = {
   index: number;
   product: SelectionProduct;
   rowName: string;
   onSidebarToggle: SidebarToggleFunc;
};

export function SelectionItem(props: SelectionItemProps) {
   const product = props.product;

   return (
      <div className="item-wrapper">
         <div className={`item ${product.is_valid ? 'item-selected' : ''}`} title={product.title}>
            <span className="item-iteration">{props.index + 1}</span>
            <a href="" title={product.title} onClick={e => props.onSidebarToggle(e, product, product.row, product.rowId)}>
               <figure><img src={product.photo.source} className="img-responsive" alt=""/></figure>
               {product.is_valid ? (
                  <span className="item-title icon" dangerouslySetInnerHTML={{ __html: MODULES.COMPONENTS ? require('@assets/icons/check.svg?raw') : '<i class="fc icons_check"></i>' }} />
               ) : (
                  <span className="item-title">{_t('vybrat')}</span>
               )}
            </a>
         </div>
         <span className="category-name">{props.rowName}</span>
      </div>
   );
}
