import { useAttribute } from '@threekit-tools/treble/dist';
import React, { useEffect } from 'react';
import { useStoreDispatch } from '../../../../App';
import useImage from '../../../../hooks/useImage';
import { SetActiveItem } from '../../../../store/actions/Settings';
import { NoImage } from '../../../../utils/helpFunctions';
import { pathImage } from '../../../StandardItem/StandardItem';
import s from './ShockItem.module.scss';

export const ShockItem = ({ ...props }) => {
  const {
    name,
    nameShock,
    img,
    setAttrShock,
    attrShock,
    item,
    currentValueShock,
    onlyNone,
  } = props;
  const dispatch = useStoreDispatch();

  // const image = img ? pathImage(img) : '';
  const image = img ? img : '';

  function changeItem(value: any) {
    let actualDataItem = attrShock.values.find(
      (item: any) => item.label === name
    );
    let infoParameters = name ? actualDataItem.metadata._img : '';

    setAttrShock(value);
    dispatch(
      SetActiveItem({
        name: nameShock,
        data: { activeItem: '', shockActive: name, img: infoParameters },
      })
    );
  }
  //   console.log('currentValueShock: ', currentValueShock);
  //   console.log('item.assetId: ', item.assetId);
  return (
    <div
      className={`${s.item_shock} ${
        currentValueShock === item.assetId ? s.active : ''
      }`}
      onClick={() => changeItem(item.assetId)}
    >
      <div className={s.img}>
        <img src={image} alt="product img" />
      </div>
      <div className={s.title}>{name}</div>
    </div>
  );
};