import React, { useEffect, useRef, useState } from 'react';
import Hint from '../../assets/Hint';
import s from './SimpleItem.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 { staticStringOptionReplace } from './../../utils/constants';
import { replaceStaticName } from '../../utils/helpFunctions';
import {
  getActualAttributesByName,
  getConfigInfo,
} from '../../store/selectors/selectors';
import { getActualTitle } from '../AttributeComponents/Product';
import { useAttribute } from '@threekit-tools/treble/dist';

export const SimpleItem = React.memo(({ ...props }: any) => {
  const {
    item,
    currentValue,
    isAsset,
    value,
    hintPosition = 'top',
    isUrlLoaderActive,
    name,
    additionalEvent = undefined,
  }: any = props;
  const search = useLocation().search;
  const configInfo = useStoreSelector(getConfigInfo);
  const { title } = getActualInfo();
  const [attribute, setAttribute]: any = useAttribute(name);

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

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

  const attributeInfo: any = useStoreSelector(getActualAttributesByName(name));

  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 title: string;

    title = item.label;

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

  function openHint() {
    setOpenModal(true);
  }

  function changeItem(value: any, label: string) {
    setAttribute(value);
    dispatch(SetActiveItem({ name, data: { activeItem: label } }));
    if (additionalEvent) {
      additionalEvent(value, label);
    }
  }

  useEffect(() => {
    if (!attributeIsActive) {
      dispatch(
        SetActiveItem({ name, data: { activeItem: getActualTitle(attribute) } })
      );
    }
  }, []);

  let titleItem: any;
  if (replaceStaticName(actualValue) === '2 inch') {
    titleItem = '2.5 inch';
  } else if (replaceStaticName(actualValue) === '4 inch') {
    titleItem = '3.5 inch';
  } else {
    titleItem = replaceStaticName(actualValue);
  }

  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)}
      className={`${s.card} ${currentValue === actualValue ? s.active : null}`}
    >
      <div className={s.title}>{titleItem}</div>
    </div>
  );
});