import React from "preact/compat";
import { useState } from "preact/hooks";
import './style.css';


function Header() {

  const [searchVal, setSearchVal] = useState('');
  const [dropdown, setDropdown] = useState(false);

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

  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">
        <h1 className={`title ${dropdown ? 'title-dropdown' : ""}`}>Hilingin</h1>
        <form onSubmit={onSearchSubmit} className={`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" style={{ padding: 5, margin: 'auto 0', borderRadius: 10, marginLeft: 'auto' }}>
          <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="#" className={`navLink ${!dropdown ? "navLink-disabled" : ""}`}>Best places</a>
        <a href="#" className={`navLink ${!dropdown ? "navLink-disabled" : ""}`}>Discover</a>
        <a href="#" className={`navLink ${!dropdown ? "navLink-disabled" : ""}`}>Trending Places</a>
        <a href="#" className={`navLink ${!dropdown ? "navLink-disabled" : ""}`}>Stories</a>
        <a href="#" className={`navLink ${!dropdown ? "navLink-disabled" : ""}`}>News / Events</a>
        <a href="#" className={`navLink ${!dropdown ? "navLink-disabled" : ""}`}>Forum</a>
        <a href="#" className={`navLink ${!dropdown ? "navLink-disabled" : ""}`}>Sign in</a>
      </div>
    </header>
  )
}

export default Header;