import React, { useState, useEffect, useRef } from 'react';

// Redux part
import { useSelector, useDispatch } from 'react-redux';
import { StoreState } from 'store/rootReducer';
import { NavLink } from 'react-router-dom';
import { FaAngleRight, FaAngleLeft } from 'react-icons/fa';

// Import actions here

import classNames from 'classnames/bind';
import TextItem from 'components/items/TextItem';
import { getLinkWithVariables, getPageInfo } from 'store/utils/adminHelpers';
import CustomIcon from 'components/items/CustomIcon';
import styleIdentifiers from './NavResourceItem.module.scss';

const styles = classNames.bind(styleIdentifiers);

export interface NavResourceItemProps {}

const NavResourceItem = (props: NavResourceItemProps) => {
  const { nav, className, options } = props;
  // mapStateToProps
  const detail = useSelector((state: StoreState) => state.generic.detail);
  // Allow to dispatch actions
  const dispatch = useDispatch();

  const navRef = useRef(null);

  const [arrowRight, setArrowRight] = useState(false);
  const [arrowLeft, setArrowLeft] = useState(false);
  const [scrollVal, setScrollVal] = useState(0);

  function renderItemNav(item: Record<string, any>, key: number) {
    if (!detail) return false;

    const pageInfo = getPageInfo(props, options);

    if (typeof pageInfo === 'string') return false;

    const { type, allParams, modelOptions } = pageInfo;

    let link;

    const linkData = {
      ...allParams,
      ...detail.data,
      type,
    };

    if (item.link) {
      if (modelOptions.baseNav) {
        link = getLinkWithVariables(modelOptions.baseNav + item.link, linkData);
      } else {
        link = getLinkWithVariables(item.link, linkData);
      }
    }

    if (item.link) {
      return (
        <NavLink
          key={key}
          to={{
            pathname: link,
            search: location.search,
          }}
          activeClassName={styles('state-active')}
          className={styles('item')}
          isActive={(match, loc) => {
            return loc?.pathname?.indexOf(link) >= 0;
          }}
        >
          {item.icon && <CustomIcon className={styles('icon')} icon={item.icon || ''} />}
          {item.title}
        </NavLink>
      );
    }
    return (
      <div key={key} className={styles('category')}>
        <div className={styles('category-container')}>
          <div className={styles('category-item')}>
            {item.icon && <CustomIcon className={styles('icon')} icon={item.icon || ''} />}
            {item.title}
          </div>
        </div>
      </div>
    );
  }

  function detectIfArrowDisplay(dir) {
    if (!navRef?.current) return false;

    const width = navRef?.current?.clientWidth;
    const scroll = navRef?.current?.scrollWidth;

    if (width < scroll && dir === 'right') {
      if (width + scrollVal > scroll) return false;
      return true;
    }

    if (dir === 'left' && scrollVal > 0) {
      return true;
    }

    return false;
  }

  function handleScroll(dir) {
    let current = navRef?.current?.scrollLeft;
    if (dir === 'right') {
      navRef?.current.scrollTo({
        top: 0,
        left: current += 500,
        behavior: 'smooth',
      });
    }

    if (dir === 'left') {
      navRef?.current.scrollTo({
        top: 0,
        left: current -= 500,
        behavior: 'smooth',
      });
    }

    setScrollVal(current);
  }

  useEffect(() => {
    setArrowRight(detectIfArrowDisplay('right'));
    setArrowLeft(detectIfArrowDisplay('left'));
  }, [scrollVal]);

  useEffect(() => {
    setTimeout(() => {
      setArrowRight(detectIfArrowDisplay('right'));
      setArrowLeft(detectIfArrowDisplay('left'));
    }, 1000);
  }, []);

  if (!nav || nav.length === 0) return false;

  return (
    <div className={styles('nav-resource-item', className)} ref={navRef}>
      {arrowLeft && (
        <div className={styles('arrow-container', 'left')}>
          <div className={styles('arrow')} onClick={() => handleScroll('left')}>
            <FaAngleLeft />
          </div>
        </div>
      )}
      {nav && nav.map((item, key) => renderItemNav(item, key))}
      {arrowRight && (
        <div className={styles('arrow-container')}>
          <div className={styles('arrow')} onClick={() => handleScroll('right')}>
            <FaAngleRight />
          </div>
        </div>
      )}
    </div>
  );
};

export default NavResourceItem;
