import React, { useEffect, useRef, useState } from 'react';
import Hint from '../../assets/Hint';
import s from './StandardItem.module.scss';
import productStyle from './../AttributeComponents/Product.module.scss';
import CloseSvg from '../../assets/CloseSvg';
import { useStoreDispatch, useStoreSelector } from '../../App';
import { modalName } from '../../store/reducers/Settings';
import { SetActiveItem, SetModal } from '../../store/actions/Settings';
import { stringDataParameters } from '../../utils/constants';
import { useLocation } from 'react-router-dom';
import {
  getActualAttributesByName,
  getConfigInfo,
} from '../../store/selectors/selectors';
import { getActualPrice, getActualTitle } from '../AttributeComponents/Product';
import { useAttribute, useConfigurator } from '@threekit-tools/treble/dist';
import { getActualPriceById } from './../../store/selectors/selectors';
import useImage from '../../hooks/useImage';
import { NoImage } from '../../utils/helpFunctions';
export function pathImage(name: any) {
  const { loading, error, image } = useImage(name);
  let result: any = '';
  if (!loading && image) {
    result = image;
  }
  return result;
}
export const StandardItem = React.memo(({ ...props }) => {
  const {
    item,
    currentValue,
    isAsset,
    value,
    hintPosition = 'top',
    isUrlLoaderActive,
    name,
    price,
    NotImage = '',
  }: any = props;
  const search = useLocation().search;
  const { img, title } = getActualInfo();
  const [attribute, setAttribute]: any = useAttribute(name);
  // const attributeInfo: any = useStoreSelector(getActualAttributesByName(name));
  const attributeInfo = useStoreSelector(getActualPriceById);

  const attributeInfoCustom = useStoreSelector(getConfigInfo).attributeIsActive;
  let attributeIsActive = attributeInfoCustom && attributeInfoCustom[name];

  const dispatch = useStoreDispatch();
  const openTutorial = ({ e, name, item }: any) => {
    dispatch(
      SetModal({ list: { [name]: true }, info: { hintPosition, e, item } })
    );
  };

  function changeItem(value: any, label: string, price: any) {
    let actualDataItem = attribute.values.find(
      (item: any) => item.label === label
    );
    let id = undefined;
    let infoParameters = label ? actualDataItem.metadata._img : '';

    if (label !== 'None') {
      id = actualDataItem.metadata._id;
    }

    setAttribute(value);
    dispatch(
      SetActiveItem({
        name,
        data: {
          activeItem: label,
          activeItemId: id,
          img: infoParameters,
          price: price,
        },
      })
    );
  }

  useEffect(() => {
    if (!attributeIsActive) {
      let label = getActualTitle(attribute);
      let priceInfo: any;
      let price = 0;
      let id = undefined;
      let actualDataItem = attribute.values.find(
        (item: any) => item.label === label
      );
      let infoParameters = label ? actualDataItem.metadata._img : '';
      if (label !== 'None') {
        id = actualDataItem.metadata._id;
        priceInfo = attributeInfo[id];
        price = getActualPrice({ isAsset, item: actualDataItem, priceInfo });
      }

      dispatch(
        SetActiveItem({
          name,
          data: {
            activeItem: label,
            activeItemId: id,
            img: infoParameters,
            price,
          },
        })
      );
    }
  }, []);

  let actualValue = value;
  if (isAsset) {
    if (attributeIsActive && isUrlLoaderActive) {
      actualValue = item.metadata.option;
    }
  }

  const wrapperEl: any = useRef(null);
  const [openModal, setOpenModal]: any = useState(false);
  function getActualInfo() {
    let img: string;
    let title: string;
    // img = item.metadata._img ? pathImage(item.metadata._img) : NotImage;
    img = item.metadata._img ? item.metadata._img : NotImage;
    title = item.label;

    return { img, title };
  }
  function closeHint() {
    setOpenModal(false);
  }

  function openHint() {
    setOpenModal(true);
  }

  const wrapperRef: any = useRef(null);
  useEffect(() => {
    const handleClickOutside =
      (wrapperRef: any, closeFunc: any) => (event: any) => {
        if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
          closeFunc();
        }
      };
    document.addEventListener(
      'mousedown',
      handleClickOutside(wrapperRef, closeHint)
    );
    return () => {
      document.removeEventListener(
        'mousedown',
        handleClickOutside(wrapperRef, closeHint)
      );
    };
  }, [wrapperRef]);

  return (
    <div
      onClick={() => changeItem(value, title, price)}
      className={`${s.card} ${currentValue === actualValue ? s.active : null}`}
    >
      {item.name !== 'None' && (
        <div
          className={s.hint}
          ref={wrapperEl}
          onClick={(e) =>
            currentValue === value &&
            openTutorial({ e, name: 'itemHint', item })
          }
        >
          <Hint />
        </div>
      )}

      <div className={s.img}>
        <img src={img} alt="product img" />
      </div>
      <div className={s.title}>{title}</div>
      {item.name !== 'None' && <div className={s.price}>${price}</div>}
    </div>
  );
});