import { Link } from "react-router-dom";
import styles from "./styles.module.css";
import Onboarding from "../Onboarding";
import { useRef, useState } from "react";
import TextWithFinger from "../TextWithFinger";
import { useDispatch, useSelector } from "react-redux";
import { actions, selectors } from "@/store";
import { useTranslation } from "react-i18next";

export interface INavbarHomeItems {
  title: string;
  paths: string[];
  image: string;
  path: string;
  active?: boolean;
  onClick?: () => void;
}

interface INavbarHomeProps {
  items: INavbarHomeItems[];
}

function NavbarFooter({ items }: INavbarHomeProps): JSX.Element {
  const dispatch = useDispatch();
  const { t } = useTranslation();
  const onboardingConfigNavbarFooter = useSelector(
    selectors.selectOnboardingNavbarFooter
  );

  const [isShowOnboardingNavbarFooter, setIsShowOnboardingNavbarFooter] =
    useState(!onboardingConfigNavbarFooter.isShown);
  const [selectedOnboarding, setSelectedOnboarding] = useState(3);

  const buttonsRef = useRef([] as HTMLDivElement[]);

  const setShownOnboarding = () => {
    setIsShowOnboardingNavbarFooter(false);
    dispatch(
      actions.onboardingConfig.update({
        navbarFooter: {
          isShown: true,
        },
      })
    );
  };

  const onboardingsSettings = [
    {
      text: t("au.web_onbording.breathing"),
      onClick: () => setSelectedOnboarding(2),
      classNameText: `${styles["breathing-onboarding__text"]} ${styles.onboarding}`,
    },
    {
      text: t("au.web_onbording.onboarding_2"),
      onClick: () => setSelectedOnboarding(2),
    },
    {
      text: t("au.web_onbording.compatibility"),
      onClick: () => setShownOnboarding(),
      classNameText: `${styles["compatibility-onboarding__text"]} ${styles.onboarding}`,
    },
    {
      text: t("au.web_onbording.moon"),
      onClick: () => setSelectedOnboarding(0),
      classNameText: `${styles["moon-onboarding__text"]} ${styles.onboarding}`,
    },
  ];

  const handleClick = (item: INavbarHomeItems) => {
    onboardingsSettings[selectedOnboarding].onClick();
    if (item.onClick) {
      item.onClick();
    }
  };

  return (
    <div className={`${styles["container"]}`}>
      {items.map((item, index) => (
        <div
          className={`${styles["navbar-item"]} ${
            item.active ? styles["navbar-item--active"] : ""
          }`}
          key={index}
          ref={(el) => (buttonsRef.current[index] = el as HTMLDivElement)}
        >
          {isShowOnboardingNavbarFooter && (
            <Onboarding
              targetRef={buttonsRef.current[index]}
              isShow={index === selectedOnboarding}
            >
              <TextWithFinger
                text={onboardingsSettings[index].text}
                crossClickHandler={() => onboardingsSettings[index].onClick()}
                classNameText={onboardingsSettings[index].classNameText}
              />
            </Onboarding>
          )}
          <Link
            className={styles["navbar-item__link"]}
            to={item.path}
            onClick={() => {
              handleClick(item);
            }}
          >
            <div
              className={styles["navbar-item__image-container"]}
              style={{
                backgroundColor: item.paths.includes(location.pathname)
                  ? "#ff2c57"
                  : "#fff",
                mask: `url('/navbar-icons/${item.image}')`,
                WebkitMask: `url('/navbar-icons/${item.image}')`,
                WebkitMaskSize: "contain",
                WebkitMaskRepeat: "no-repeat",
                WebkitMaskPosition: "center",
              }}
            >
              {/* <img
                className={styles["navbar-item__image"]}
                src={`./navbar-icons/${item.image}`}
                style={{ }}
                alt={item.title}
              /> */}
            </div>
            <p
              style={{
                color: item.paths.includes(location.pathname)
                  ? "#ff2c57"
                  : "#fff",
              }}
            >
              {item.title}
            </p>
          </Link>
        </div>
      ))}
    </div>
  );
}

export default NavbarFooter;