import React, { useState } from 'react';

import proximity_logo from '../assets/images/proximity_logo.svg';
import backgroundVideo from '../assets/videos/video.mp4';

export default function HeaderD({
  currentLanguage,
  setCurrentLanguage,
  showCookies,
  setShowCookies,
}) {
  const [showSidebar, setShowSidebar] = useState(false);

  const headerLinkClasses =
    'text-gray-100 font-avenirbook font-normal hover:underline focus:underline text-lg w-full bg-gray-900 my-1 py-2 text-center opacity-75 rounded';

  const sidebar = (
    <div className="z-30 w-5/6 h-full flex flex-col justify-start bg-gray-700 bg-opacity-75 pt-20 px-2 fixed">
      <a className={headerLinkClasses} href="/">
        About
      </a>
      <a className={headerLinkClasses} href="/">
        Work
      </a>
      <a className={headerLinkClasses} href="/">
        Latest
      </a>
      <a className={headerLinkClasses} href="/">
        People & Careers
      </a>
      <a className={headerLinkClasses} href="/">
        Contact
      </a>
    </div>
  );

  const cookies = (
    <div className="w-full bg-indigo-1000 flex flex-col items-center justify-center py-4 px-2 z-10 fixed bottom-0">
      <div className="text-gray-100 font-avenirbook text-xs font-normal text-center">
        This website uses cookies to improve your experience. We'll assume
        you're ok with this, but you can opt out if you wish.
      </div>

      <div className="w-4/5 px-2 flex justify-around items-center mt-4">
        <button
          className="flex items-center justify-center rounded px-6 py-1 text-sm font-bold bg-gray-100 text-indigo-1000 mx-4 hover:opacity-75 focus:opacity-75"
          onClick={() => setShowCookies(false)}
        >
          Accept
        </button>

        <a
          className="text-gray-200 border-b border-red-1000 hover:text-white focus:text-white text-sm"
          href="/"
        >
          Read more
        </a>
      </div>
    </div>
  );

  return (
    <div className="h-screen w-full">
      <div className="absolute z-20 h-12 w-full flex items-center justify-between mt-4 px-4">
        <img
          src={proximity_logo}
          alt="Proximity Logo"
          className="h-full object-scale-down"
        />

        <div className="w-2/5 h-full flex items-center justify-end">
          {/* <a className={headerLinkClasses} href="/">
            About
          </a>
          <a className={headerLinkClasses} href="/">
            Work
          </a>
          <a className={headerLinkClasses} href="/">
            Latest
          </a>
          <a className={headerLinkClasses} href="/">
            People & Careers
          </a>
          <a className={headerLinkClasses} href="/">
            Contact
          </a> */}

          <div className="border h-10 px-2 flex justify-between items-center">
            <button
              className={`uppercase font-avenirbook text-lg text-gray-200 mr-1 ${
                currentLanguage === 'en' ? 'font-bold' : ''
              }`}
              onClick={() => setCurrentLanguage('en')}
            >
              EN
            </button>
            <button
              className={`uppercase font-avenirbook text-lg text-gray-200 ml-1 ${
                currentLanguage === 'fr' ? 'font-bold' : ''
              }`}
              onClick={() => setCurrentLanguage('fr')}
            >
              FR
            </button>
          </div>

          <button
            className={`ml-4 w-10 h-10 flex justify-center items-center ri-${
              showSidebar ? 'close' : 'menu'
            }-fill bg-${
              showSidebar ? 'red' : 'blue'
            }-500 opacity-75 text-lg font-bold text-gray-100 rounded-sm`}
            onClick={() => setShowSidebar((current) => !current)}
          />
        </div>
      </div>

      <div className="absolute z-10 w-full h-full flex items-center justify-center">
        <p className="w-5/6 font-avenirblack text-center text-4xl font-bold text-gray-200">
          We make people
          <br />
          more valuable to brands
        </p>
      </div>

      <div className="absolute z-10 w-full h-full flex flex-col items-center justify-end">
        <a
          href="#part-one"
          className="w-12 h-12 flex justify-center items-center text-4xl text-gray-200 ri-arrow-down-fill rounded-full border hover:border-white border-transparent mb-32"
        />
      </div>

      {showCookies && cookies}
      {showSidebar && sidebar}

      <video
        className="h-full w-full bg-gray-900 z-0 object-cover absolute"
        autoPlay
        loop
        muted
      >
        <source src={backgroundVideo} type="video/mp4" />
      </video>
    </div>
  );
}
