import React from "preact/compat";
import { useState } from "preact/hooks";
import { useSelector, useDispatch } from "react-redux";
import { UserRootState } from "../../store/type";
import { logout } from '../../actions';
import './style.css';
import { logoutService } from "../../services";


function Header() {
  const [searchVal, setSearchVal] = useState('');
  const [dropdown, setDropdown] = useState(false);
  const [pageState, setPageState] = useState({
    profileMenu: false
  })

  const dispatch = useDispatch();
  const user = useSelector((state: UserRootState) => state.auth)

  const onInput = (e: React.ChangeEvent<HTMLInputElement>): void => {
    const val = e.target as HTMLInputElement;
    setSearchVal(val.value)
  }

  const handleLogout = async (): Promise<void> => {
    try {
      await logoutService()
      dispatch(logout())
      location.reload()
    } catch (error) {
      alert(error)
    }
  }

  const onSearchSubmit = (e: React.TargetedEvent<HTMLFormElement>): void => {
    e.preventDefault();
  }

  const onDropdown = (): void => {
    document.body.style.overflow = "hidden"

    if (dropdown) {
      document.body.style.overflowX = "hidden";
      document.body.style.overflowY = "scroll";
    }
    setDropdown(!dropdown)
  }

  return (
    <header>
      <div className="flex flex-row content">
        <a href={"/"}>
          <h1 className={`title ${dropdown ? 'title-dropdown' : ""}`}>Hilingin</h1>
        </a>
        <div className={'user-img self-center mr-5'} style={dropdown ? { display: 'none' } : ''}>
          <a href={user.username ? '#' : '/login'} onClick={() => user.username ? setPageState({ ...pageState, profileMenu: !pageState.profileMenu }) : ''}>
            <img
              loading={'lazy'}
              style={{ width: 40, borderRadius: 15 }}
              src={'https://cdn.discordapp.com/attachments/743422487882104837/1153985664849805392/421-4212617_person-placeholder-image-transparent-hd-png-download.png'}
            />
          </a>
          {user.username &&
              <div className={'profile-dropdown-img bg-secondary text-left'} style={pageState.profileMenu ? { display: 'block' } : { display: 'none' }}>
                <a href={'/user/profile'}><div className={'p-2'}>Profile</div></a>
                <a href={'#'}><div className={'p-2'}>Feed</div></a>
                <a href={'/add-location'}><div className={'p-2'}>Add location</div></a>
                <a href={'/add-location'}><div className={'p-2'}>Settings</div></a>
                <a href={'#'} onClick={handleLogout}><div className={'p-2'}>Logout</div></a>
                {/* <div className={'p-2'}><a href={'#'}>Halo</a></div> */}
                {/* <div className={'p-2'}><a href={'#'}>Halo</a></div> */}
              </div>
          }
        </div>
        <form onSubmit={onSearchSubmit} className={`header-search-input ${dropdown ? "search-input-dropdown" : ""}`}>
          <label>
            <input
              type="text"
              value={searchVal}
              onInput={onInput}
              placeholder="Yogyakarta, Pantai Cidaun ..."
              class="text-input-search"
            />
          </label>
        </form>
        <button onClick={onDropdown} className={`dropdown-menu bg-secondary ${dropdown ? 'ml-auto' : ''}`} style={{ padding: 5, borderRadius: 10 }}>
          <svg xmlns="http://www.w3.org/2000/svg" height="30" fill="white" viewBox="0 -960 960 960" width="30"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z" /></svg>
        </button>
      </div>
      <div className={`nav-container ${!dropdown ? "nav-container-disabled" : ""}`}>
        {dropdown &&
          <a href="/" className={`navLink ${!dropdown ? "navLink-disabled" : ""}`}>Home</a>
        }
        <a href="/best-places" className={`navLink ${!dropdown ? "navLink-disabled" : ""}`}>Top Places</a>
        <a href="/discover" className={`navLink ${!dropdown ? "navLink-disabled" : ""}`}>Discover</a>
        <a href="/stories" className={`navLink ${!dropdown ? "navLink-disabled" : ""}`}>Stories</a>
        <a href="/news-events" className={`navLink ${!dropdown ? "navLink-disabled" : ""}`}>News / Events</a>
        <a href="#" className={`navLink ${!dropdown ? "navLink-disabled" : ""}`}>Forum</a>
        <div className={'profile-container'}>
          <a href={user.username ? '#' : '/login'} onClick={() => user.username ? setPageState({ ...pageState, profileMenu: !pageState.profileMenu }) : ''} className={`navLink ${!dropdown ? "navLink-disabled" : ""}`}>{user.username ? user.username : 'Sign in'}</a>
          {user && screen.width > 600 &&
            <div className={'profile-dropdown bg-secondary ml-6'} style={pageState.profileMenu ? { display: 'block' } : { display: 'none' }}>
              <a href={'/add-location'}><div className={'p-1'}>Add location</div></a>
              <a href={'/user/profile'}><div className={'p-1'}>Profile</div></a>
              <a href={'#'}><div className={'p-1'}>Feed</div></a>
              <a href={'/user/settings'}><div className={'p-1'}>Settings</div></a>
              {user.is_admin &&
                <a href={'/submissions'} ><div className={'p-1'}>Submissions</div></a>
              }
              <a href={'#'} onClick={handleLogout}><div className={'p-1'}>Logout</div></a>
              {/* <div className={'p-2'}><a href={'#'}>Halo</a></div> */}
              {/* <div className={'p-2'}><a href={'#'}>Halo</a></div> */}
            </div>
          }
        </div>
      </div>
    </header>
  )
}

export default Header;