import React from 'react';
import { DefaultBtn } from '../DefaultBtn/DefaultBtn';
import { useAttribute } from '@threekit-tools/treble';
import { SetActiveItem } from '../../store/actions/Settings';
import { useStoreDispatch, useStoreSelector } from '../../App';
import s from './ShopItem.module.scss';
import {
  getActualAttributes,
  getActualAttributesByName,
} from './../../store/selectors/selectors';
import { warningShopInfo } from '../../utils/constants';
import { pathImage } from '../StandardItem/StandardItem';
export const ShopItem = ({
  name,
  quantity,
  label,
  info,
  type,
  setConfigActiveMenu,
  actualPrice,
}: any) => {
  const [attribute, setAttribute]: any = useAttribute(name);
  const actualAttributes: any = useStoreSelector(getActualAttributes);
  const dispatch = useStoreDispatch();
  const { defaultItem, activeItem, price, img, assetType } = info;

  function toDefault(e: any, value: any) {
    e.stopPropagation();
    dispatch(
      SetActiveItem({
        name: name,
        data: {
          activeItem: defaultItem,
          activeItemId: undefined,
          price: 0,
          shopInfo: { quantity: 1 },
        },
      })
    );
    setAttribute(value);
    const checkTotalPrice = Number(actualPrice) - price;
    if (checkTotalPrice === 0) {
      setConfigActiveMenu(true);
    }
  }

  function changeQuantity(number: any) {
    if (number >= 1) {
      dispatch(
        SetActiveItem({
          name: name,
          data: { activeItem: activeItem, shopInfo: { quantity: number } },
        })
      );
    }
  }
  return (
    <>
      {type === 'asset' ? (
        <div className={s.wrapper}>
          {assetType === 'item' && activeItem !== 'None' && (
            <div className={s.item}>
              <div className={s.close}>
                <DefaultBtn toDefault={toDefault} attribute={attribute} />
              </div>

              <div className={s.img}>
                {/* <img src={pathImage(img)} alt="" /> */}
                <img src={img} alt="" />
              </div>
              <div className={s.info}>
                <div className={s.title}>{activeItem}</div>
                <div className={s.price}>${price}/unit</div>
                {warningShopInfo[name] && (
                  <div
                    className={`${s.hint} ${
                      warningShopInfo[name].min > quantity && s.active
                    }`}
                  >
                    {warningShopInfo[name].hint}
                  </div>
                )}
              </div>
              <div className={s.content}>
                <div className={s.quantity}>
                  <div
                    className={s.remove}
                    onClick={() => changeQuantity(quantity - 1)}
                  ></div>
                  <div className={s.number}>{quantity}</div>
                  <div
                    className={s.add}
                    onClick={() => changeQuantity(quantity + 1)}
                  ></div>
                </div>
                <div className={s.total}>${(quantity * price).toFixed(2)}</div>
              </div>
            </div>
          )}
        </div>
      ) : (
        <div className={s.wrapper}>
          {activeItem !== 'None' && (
            <div className={`${s.item} ${s.string_item}`}>
              <div className={s.close}>
                <DefaultBtn toDefault={toDefault} attribute={attribute} />
              </div>
              <div className={s.info}>
                <div className={s.title}>{type}</div>
                <div className={s.descr}>{activeItem}</div>
              </div>
            </div>
          )}
        </div>
      )}
    </>
  );
};