import React, { CSSProperties, useState } from "react";
import logo from "./logoIcon.svg";
import chevron from "./chevronIcon.svg";
import "./header.css";
import "../../styles/styles.css";
import iconClose from './closeIcon1.svg'
import { Nav } from "../Navigaton/navigation";
import { useLocation, useHistory } from "react-router-dom";


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

export const Header: React.FC<THeader> =
  ({ changeLanguage, language, text }) => {
    const [open, setOpen] = useState<boolean>(false)
    const [menuOpen, setMenuOpen] = useState(false)
    const [opacity, setOpacity] = useState(false)
    const userLanguage = language === 'RU';

    const location = useLocation()
    const history = useHistory()
    console.log(location, 'loc')

    function handleUpdateLanguage(value: string) {
      changeLanguage(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'

    }

    function goBack() {
      if (location.pathname === '/demos') {
        history.goBack()
      } else {
        window.location.reload();
      }
    }

    return (
      <div  className="header">
        <div className="header-container">
          <img onClick={goBack} className="header-logo" alt="company-logo" src={logo} />
          <div className="header-buttons">
            <div className="header__buttons_wrapper">
              <a target='_blank' rel="noreferrer" href={userLanguage ? 'https://graff.tech/contacts/' : 'http://en.graff.tech/contactseng' } className="header-button">{text.captionContact}</a>
              <a target='_blank' rel="noreferrer" href={userLanguage ? 'https://graff.tech/' : 'http://en.graff.tech/' } className="header-button">{text.captionCompain}</a>
            </div>
            <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">
                <button onMouseEnter={handleOpacity} onMouseLeave={() => setOpacity(false)} onClick={handleOpen} className=" header-lang-button-picked">{language}</button>
              </div>
              {language === '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>
          {menuOpen ? <img alt="iconClose" src={iconClose} onClick={openMenu} className='nav__close'></img>
            :
            <button onClick={setOpacityAndMenu} className="burger__button">
              <span className="line__burger"></span>
              <span className="line__burger"></span>
              <span className="line__burger"></span>
            </button>}
        </div>
        <Nav text={text} setOpacity={setOpacity} language={language} menuOpen={menuOpen} setOpen={setMenuOpen} changeLanguage={changeLanguage}></Nav>
      </div>

    );
  }

