import React, { CSSProperties, useState } from "react";
import logo from "./logoIcon.svg";
import chevron from "./chevronIcon.svg";
import "./header.css";
import "../../styles/styles.css";
import { useLocation } from "react-router-dom";
import { useAppSelector, useAppDispatch } from "../../hooks/redux";
import { languageSlice } from "../../store/reducers/languageSlice";

export type THeader = {
  language: string;
  changeLanguage: (language: string) => void;
};

export const Header: React.FC = ({}) => {
  const [open, setOpen] = useState<boolean>(false);
  const [menuOpen, setMenuOpen] = useState(false);
  const [opacity, setOpacity] = useState(false);
  const location = useLocation();

  const { handleChangeLanguage } = languageSlice.actions;
  const { currentLang } = useAppSelector((state) => state.languageReducer);
  const dispatch = useAppDispatch();

  function handleUpdateLanguage(value: string) {
    dispatch(handleChangeLanguage(value));
    setOpen((prev) => !prev);
  }

  function handleOpen() {
    setOpen((prev) => !prev);
  }

  function handleOpacity() {
    setOpacity(true);
  }

  const style = {
    background: "rgba(235, 235, 235, 0.2",
  };

  const iconTransform = {
    transform: "rotate(-90deg)",
  } as CSSProperties;

  const setBackground = opacity && (!open as boolean);

  function setOpacityAndMenu() {
    setMenuOpen(true);
    const targetElement = document.querySelector("body") as HTMLElement;
    targetElement.style.overflow = "hidden";
  }

  function openMenu() {
    setMenuOpen(false);
    const targetElement = document.querySelector("body") as HTMLElement;
    targetElement.style.overflow = "visible";
  }

  return (
    <div
      className={
        location.pathname === "connect-page" ? "header" : "header-main"
      }
    >
      <div className="header-container">
        <img className="header-logo" alt="company-logo" src={logo} />
        <div className="header-buttons">
          <div
            className={
              open
                ? "header-lang-button header-lang-button_active"
                : "header-lang-button header-lang-button_disabled"
            }
            style={setBackground ? style : { background: "transparent" }}
          >
            <img
              alt="img"
              src={chevron}
              className="header-select__icon"
              style={
                open
                  ? iconTransform
                  : {
                      transform: "rotate(0deg)",
                    }
              }
            ></img>
            <div className="wrapper__button">
              <div
                onMouseEnter={handleOpacity}
                onMouseLeave={() => setOpacity(false)}
                onClick={handleOpen}
                className=" header-lang-button-picked"
              >
                {currentLang.toLocaleUpperCase()}
              </div>
            </div>
            {currentLang === "ru" ? (
              <button
                value={"en"}
                onClick={(e: any) => handleUpdateLanguage(e.target.value)}
                className="header-lang-button-text"
              >
                EN
              </button>
            ) : (
              <button
                onClick={(e: any) => handleUpdateLanguage(e.target.value)}
                value={"ru"}
                className="header-lang-button-text"
              >
                RU
              </button>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};
