import { useEffect, useState } from "react";
import { LogoWhite } from "../../../images";
import SideBarItem from "./_molecules/_atoms/SideBarItem";
import { TextInputElement } from "./_molecules/_atoms/TextInputElement";
import { DISPLAY_DEV_TOOLS } from "../../../config";
import { User } from "../../../types";

export function SideBar(props: React.PropsWithChildren<{ user: User }>) {
  const [apiKey, setApiKey] = useState(
    localStorage.getItem("PROJECT_API_KEY") || "",
  );

  useEffect(() => {
    localStorage.setItem("PROJECT_API_KEY", apiKey);
  }, [apiKey]);

  return (
    <div className="flex flex-col align-center justify-center p-6 w-full">
      <div className="rounded-full  m-auto mt-10">
        <img className="w-28" src={LogoWhite} alt="logo" />
      </div>

      <div className="flex flex-col items-center mt-10">
        <p className="font-semibold leading-5 text-xs tracking-wider text-white text-center">
          Welcome to
        </p>
        <p className="font-semibold leading-5 text-xs tracking-wider text-white text-center">
          GraphQL Analyzer! {props?.user?.email}
        </p>
        <p className="font-normal leading-5 text-xs tracking-wider text-white text-center pt-4">
          Your one-stop tool to analyze <br /> your GraphQL API.
        </p>
      </div>

      <div className="flex flex-col items-start gap-5 justify-start mt-10 w-full">
        <div className="flex flex-col gap-2 w-full">
          <div className="flex flex-col gap-2 mt-3 w-full rounded-m">
            <SideBarItem
              icon={
                <span className="w-auto h-auto">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    strokeWidth="1.5"
                    stroke="currentColor"
                    className="w-6 h-6"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5m.75-9l3-3 2.148 2.148A12.061 12.061 0 0116.5 7.605"
                    />
                  </svg>
                </span>
              }
              title="Dashboard"
              url="/dashboard"
            />
          </div>
        </div>
        <div className="flex flex-col mt-5 gap-2 w-full ">
          {DISPLAY_DEV_TOOLS && (
            <div className="border rounded-xl bg-gql-white w-full p-3 justify-between shadow text-xs">
              <p className="mb-3 text-gql-vis-dark font-bold">API KEY: </p>
              <TextInputElement
                name="api-key"
                value={apiKey}
                disabled={!DISPLAY_DEV_TOOLS}
                onChange={(v) => {
                  setApiKey(v.target.value);
                }}
              ></TextInputElement>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}
