/**
 * NOTE:
 *  Seems like component duplicate.
 *  And it has no export usage through the whole project.
 * TODO: should be checked to be sure in deletion this component safety.
 * */

//import React, { Fragment, useCallback, useEffect, useRef } from 'react'
//import { createPortal } from "react-dom";
//import { CustomizationComponentProps } from '../../../_types';
//import StoreView from '../../_store/StoreView';
//import { useAppDispatch } from '@/core/utils/hooks/useRedux';
//import { initStoreViewHandlers } from '@/core/redux/customization';
//
//interface Props extends CustomizationComponentProps { }
//
//const ViewStoreModal = (props: Readonly<Props>): JSX.Element | null => {
//  const dispatch = useAppDispatch();
//
//  const storeViewContainer = useRef<HTMLDivElement>(null);
//  const storeViewBtn = useRef<HTMLButtonElement>(null);
//  const overlay = useRef<HTMLDivElement>(null);
//
//  const close = useCallback(() => {
//    if (storeViewContainer.current && overlay.current) {
//      storeViewContainer.current!.classList.remove("!opacity-100", "!scale-100", "!left-[calc(50%-292px/2)]", "!top-[calc(50%-620px/2)]");
//      overlay.current!.classList.remove("!opacity-100")
//      setTimeout(() => {
//        storeViewContainer.current!.classList.remove("!z-[160]");
//        overlay.current!.classList.remove("!z-[150]");
//        overlay.current!.classList.add("pointer-events-none");
//      }, 200)
//    }
//    // eslint-disable-next-line
//  }, [])
//
//  const open = useCallback(() => {
//    if (storeViewContainer.current && overlay.current) {
//      storeViewContainer.current.classList.add("!z-[160]");
//      overlay.current.classList.add("!z-[150]");
//      overlay.current!.classList.remove("pointer-events-none");
//      setTimeout(() => {
//        storeViewContainer.current!.classList.add("!opacity-100", "!scale-100", "!left-[calc(50%-292px/2)]", "!top-[calc(50%-620px/2)]");
//        overlay.current!.classList.add("!opacity-100");
//      }, 200)
//    }
//    if (typeof window !== "undefined" && localStorage.getItem("change_store_tooltip") !== "hide") {
//      localStorage.setItem("change_store_tooltip", "hide");
//    }
//    // eslint-disable-next-line
//  }, [])
//
//  useEffect(() => {
//    dispatch(initStoreViewHandlers({ close, open }))
//    // eslint-disable-next-line
//  }, []);
//
//  return (
//    <>
//      {createPortal(
//        <Fragment>
//          <div
//            ref={overlay}
//            onClick={close}
//            className={`fixed -z-[150] top-0 left-0 w-screen h-screen opacity-0 bg-dark-900 bg-opacity-50 transition-opacity`}
//          />
//          <div
//            ref={storeViewContainer}
//            style={{
//              top: storeViewBtn.current?.getBoundingClientRect().top || "50%",
//              left: storeViewBtn.current?.getBoundingClientRect().left || 25,
//            }}
//            className={`fixed rounded-[8px] bg-white w-[292px] h-[620px] -z-[160] opacity-0 transition-all duration-500 scale-50 origin-top-left`}
//          >
//            <StoreView {...props} />
//          </div>
//        </Fragment>, (window as Window & typeof globalThis)?.document.body as HTMLElement)}
//    </>
//  )
//}
//
//export default ViewStoreModal