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

// import { shallowEqual, useSelector } from 'react-redux';
// import { useTranslation } from 'react-i18next';
// import { useNavigate } from 'react-router-dom';
import './Headers.scss';

// import i18n from '../../locale/languages/LangConfig';

import basket__icon from './../../static/logos/basket.svg';
import paw__icon from './../../static/logos/paw.svg';

// import type { ILang, IUser, UserState } from '../../Store/Type';

import cross_bar from './../../static/header/cross_bar.svg';
import hamburger_menu from './../../static/header/hamburger_menu.svg';
import logo from './../../static/header/logo.svg';
import defaultUserImg from './../../static/header/defaultUserImg.png';
// import { useLocation } from 'react-router';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
  faBars,
  faCross,
  faTimes,
  faXmark,
  faUser,
} from '@fortawesome/free-solid-svg-icons';
// import { useDispatch } from 'react-redux';
// import { changeSelectedLang } from '../../Store/ActionCreator';
// import { useGuestFlow } from '../../utils/methods/helpers';
import userLogo from '../../Assets/logos/user-solid.svg';

interface IPROPS {
  profilePicLatest?: any;
  onHomePage?: any;
}

export const Header: React.FC<IPROPS> = ({
  profilePicLatest,
  onHomePage,
}: IPROPS) => {
  //   const { pathname } = useLocation();
  //   const navigate = useNavigate();
  // const { t } = useTranslation();
  //   const { handleGetStarted } = useGuestFlow();
  //   const dispatch: React.Dispatch<any> = useDispatch();
  //   const user: IUser = useSelector((state: UserState) => {
  //     return state.user;
  //   }, shallowEqual);

  //   const selectedLanguageFromStore: ILang = useSelector((state: UserState) => {
  //     return state.selectedLanguage;
  //   }, shallowEqual);
  // const selectedLanguage = {
  //     language: selectedLanguageFromStore.language,
  // };
  const [isAuthed, setIsAuthed] = useState<boolean>(false);
  const [isOpen, setIsOpen] = useState<boolean>(false);
  const [loggedUserData, setLoggedUserData] = useState<any>();
  // const [selectedLanguage, setSelectedLanguage] = useState<any>("");
  // let authData = localStorage.getItem("authToken");
  let authData = localStorage.getItem('isGuestUser');
  useEffect(() => {
    if (authData != null && authData == 'false') {
      setIsAuthed(true);
    }
    let isAuth: any = localStorage.getItem('user');
    isAuth = isAuth !== 'undefined' && JSON.parse(isAuth);
    if (authData != null && authData == 'false') {
      setLoggedUserData(isAuth);
    }
  }, [authData, profilePicLatest]);
  const changeLanguage = (event: React.FormEvent<HTMLSelectElement>): void => {
    const selectedLanguageFromHeader = (event.target as HTMLInputElement).value;
    // void i18n.changeLanguage(selectedLanguageFromHeader);
    const selectedLanguage = {
      language: selectedLanguageFromHeader,
    };
    // dispatch(changeSelectedLang(selectedLanguage));
    sessionStorage.setItem(
      'SelectedLangFromSession',
      JSON.stringify(selectedLanguage)
    );
    // setSelectedLanguage(selectedLanguage);
  };

  let SelectedLangFromSession: any;
  useEffect(() => {
    SelectedLangFromSession = sessionStorage.getItem('SelectedLangFromSession');
    SelectedLangFromSession =
      SelectedLangFromSession != null
        ? JSON.parse(SelectedLangFromSession)
        : 'en';
    const selectedLanguage = {
      //   language: selectedLanguageFromStore.language,
    };
    // void i18n.changeLanguage(selectedLanguageFromStore.language);
    // dispatch(changeSelectedLang(selectedLanguage));
    sessionStorage.setItem(
      'SelectedLangFromSession',
      JSON.stringify(SelectedLangFromSession)
    );
    // setSelectedLanguage(SelectedLangFromSession);
  }, []);
  //[pathname]

  return (
    <div className={`${onHomePage ? 'header__homepage' : 'header'}`}>
      {/* <div className={`${onHomePage ? 'header__homepage' : 'header'}`}> */}
      <div className='layout_container'>
        <div className='header__menus'>
          <div className='header_menu_left'>
            <span
              className={'header_single_item'}
              //   className={`${
              //     pathname == '/recipe'
              //       ? 'header_single_item_active'
              //       : 'header_single_item'
              //   }`}
              onClick={(): void => {
                // navigate('/recipe');
              }}
            >
              {'RECIPES'}
            </span>
            <span
              className={'header_single_item'}
              //   className={`${
              //     pathname == '/our-story'
              //       ? 'header_single_item_active'
              //       : 'header_single_item'
              //   }`}
              onClick={(): void => {
                // navigate('/our-story', { state: { nav: '' } });
              }}
            >
              {'OUR_STORY'}
            </span>
            <span
              className={'header_single_item'}
              //   className={`${
              //     pathname == '/our-process'
              //       ? 'header_single_item_active'
              //       : 'header_single_item'
              //   }`}
              onClick={(): void => {
                // navigate('/our-process');
              }}
            >
              {'OUR_PLAN'}
            </span>
            <span
              className={'header_single_item'}
              //   className={`${
              //     pathname == '/reviews'
              //       ? 'header_single_item_active'
              //       : 'header_single_item'
              //   }`}
              onClick={(): void => {
                // navigate('/reviews');
              }}
            >
              {'REVIEWS'}
            </span>
          </div>
          <img
            className='header__menu__logo'
            src={logo}
            alt='Buddy Fresh'
            onClick={(): void => {
              //   navigate('/');
            }}
          />
          <div className='header_menu_right'>
            <section>
              {!isAuthed ? (
                <>
                  <button
                    className='header__btn__val1'
                    onClick={(): void => {
                      //   handleGetStarted();
                    }}
                  >
                    {'Get_Started'}
                  </button>
                  <button
                    className='header__btn__val2'
                    onClick={(): void => {
                      //   navigate('/login');
                    }}
                  >
                    {'Login '}
                  </button>
                </>
              ) : (
                <section className='header__logged__icons__container'>
                  {!profilePicLatest && !loggedUserData?.profilePic ? (
                    <div
                      className='user_logo'
                      onClick={(): void => {
                        // navigate('/my-account');
                      }}
                    >
                      <FontAwesomeIcon
                        icon={faUser}
                        className='logo'
                      />
                    </div>
                  ) : (
                    <img
                      className='header__logged__icon_img'
                      src={
                        profilePicLatest
                          ? profilePicLatest
                          : loggedUserData?.profilePic
                          ? loggedUserData?.profilePic
                          : undefined
                      }
                      alt='user icon'
                      onClick={(): void => {
                        // navigate('/my-account');
                      }}
                    />
                  )}
                  <img
                    className='header__logged__icon'
                    src={paw__icon}
                    alt='paw icon'
                    onClick={(): void => {
                      //   navigate('/my-pets');
                    }}
                  />
                  <img
                    className='header__logged__icon'
                    src={basket__icon}
                    alt='basket icon'
                    onClick={(): void => {
                      //   navigate('/my-order');
                    }}
                  />
                </section>
              )}
            </section>
            <select
              onChange={changeLanguage}
              //   value={selectedLanguageFromStore.language}
            >
              <option value={'en'}>EN</option>
              <option value={'th'}>TH</option>
            </select>
          </div>
          <div
            className={`${
              onHomePage ? 'hamburger__container_home' : 'hamburger__container'
            }`}
          >
            <div
              className={`${
                isOpen ? 'hamburger__menu__hide' : 'hamburger__menu'
              }`}
              onClick={(): void => {
                // navigate('/menu');
                setIsOpen(!isOpen);
              }}
            >
              {/* <img src={hamburger_menu} alt="hamburger menu" /> */}
              <FontAwesomeIcon
                icon={faBars}
                className='hamburger_icon'
              />
            </div>
            <div
              className={`${isOpen ? 'cross__bar' : 'cross__bar__hide'}`}
              onClick={(): void => {
                setIsOpen(!isOpen);
                // navigate(-1);
              }}
            >
              {/* <img src={cross_bar} alt="cross bar" /> */}
              <FontAwesomeIcon
                icon={faXmark}
                className='hamburger_cross_icon'
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};
