import "./App.scss";
import { useEffect, useState } from "react";
import { init, loginComplete } from "@lumeweb/libkernel/kernel";
import browser from "webextension-polyfill";
import classNames from "classnames";
import { clearLoginKey } from "../../../shared/keys.js";

export default function App() {
  const [loggedIn, setLoggedIn] = useState(false);

  useEffect(() => {
    init().then(() => {
      loginComplete().then(() => {
        setLoggedIn(true);
      });
    });
  }, [loggedIn]);

  function openDashboard() {
    browser.tabs.create({
      url: browser.runtime.getURL("dashboard.html"),
      active: true,
    });
  }

  function openAccount() {
    browser.tabs.create({
      url: browser.runtime.getURL("account.html"),
      active: true,
    });
  }

  function close() {
    window.close();
  }

  async function logout() {
    await clearLoginKey();
    window.location.reload();
  }
  return (
    <>
      <div className="header">
        <div className={classNames("logo", { connected: loggedIn })}>
          <svg
            viewBox="0 0 339.18999 339.19"
            xmlns="http://www.w3.org/2000/svg">
            <g transform="translate(-425.68,-251.35)">
              <g>
                <path d="m 697.89,382.61 c -0.96,-3.95 -3.58,-7.25 -7.1,-9.09 -1.93,-1.01 -4.13,-1.59 -6.46,-1.59 H 653.6 c -20.14,-0.03 -30.35,-10.26 -30.35,-30.42 0,-0.02 0,-0.04 0,-0.06 v 0 -76.11 c 0,-0.55 -0.04,-1.09 -0.1,-1.62 -0.01,-0.13 -0.04,-0.25 -0.06,-0.37 -0.06,-0.41 -0.13,-0.82 -0.23,-1.22 -0.03,-0.12 -0.06,-0.24 -0.09,-0.36 -0.11,-0.42 -0.24,-0.84 -0.39,-1.25 -0.03,-0.08 -0.05,-0.15 -0.08,-0.23 -0.19,-0.48 -0.4,-0.96 -0.64,-1.41 -0.01,-0.03 -0.04,-0.05 -0.05,-0.08 -0.28,-0.52 -0.58,-1.03 -0.92,-1.51 -0.01,-0.01 -0.02,-0.02 -0.03,-0.04 -0.34,-0.47 -0.7,-0.92 -1.09,-1.34 -0.04,-0.05 -0.08,-0.09 -0.13,-0.14 -0.81,-0.86 -1.72,-1.61 -2.71,-2.24 -0.09,-0.06 -0.19,-0.11 -0.28,-0.17 -0.43,-0.26 -0.88,-0.5 -1.34,-0.71 -0.08,-0.04 -0.15,-0.08 -0.23,-0.11 -0.53,-0.23 -1.07,-0.43 -1.63,-0.6 -0.11,-0.03 -0.22,-0.06 -0.33,-0.09 -0.45,-0.12 -0.92,-0.22 -1.39,-0.3 -0.16,-0.03 -0.31,-0.05 -0.47,-0.07 -0.58,-0.07 -1.18,-0.13 -1.78,-0.13 0,0 0,0 0,0 v 0 c -0.73,0 -1.43,0.07 -2.13,0.18 -0.12,0.02 -0.25,0.03 -0.37,0.06 -0.67,0.12 -1.32,0.29 -1.96,0.5 -0.1,0.03 -0.2,0.07 -0.3,0.11 -1.33,0.48 -2.56,1.15 -3.67,1.99 -0.05,0.04 -0.1,0.08 -0.16,0.12 -0.56,0.43 -1.08,0.91 -1.57,1.42 -0.02,0.02 -0.04,0.04 -0.06,0.07 -1,1.07 -1.84,2.3 -2.46,3.65 0,0 0,0.01 0,0.01 -0.3,0.64 -0.54,1.31 -0.74,2 -0.01,0.04 -0.04,0.09 -0.05,0.13 -0.15,0.55 -0.27,1.12 -0.36,1.7 -0.01,0.08 -0.03,0.16 -0.04,0.24 -0.08,0.6 -0.13,1.2 -0.13,1.82 v 76.17 c 0,0.02 0,0.04 0,0.07 0.02,28.2 15.37,58.31 58.36,58.33 0.01,0 0.02,0 0.03,0 0.01,0 0.02,0 0.03,0 h 30.63 c 3.86,0 7.36,-1.57 9.89,-4.1 2.53,-2.53 4.1,-6.03 4.1,-9.89 v -0.02 c -0.01,-1.15 -0.17,-2.24 -0.43,-3.3 z" />
                <path d="m 556.94,318.33 c -3.95,0.96 -7.25,3.58 -9.09,7.1 -1.01,1.93 -1.59,4.13 -1.59,6.46 v 30.73 c -0.03,20.14 -10.26,30.35 -30.42,30.35 -0.02,0 -0.04,0 -0.06,0 v 0 h -76.11 c -0.55,0 -1.09,0.04 -1.62,0.1 -0.13,0.01 -0.25,0.04 -0.37,0.06 -0.41,0.06 -0.82,0.13 -1.22,0.23 -0.12,0.03 -0.24,0.06 -0.36,0.09 -0.42,0.11 -0.84,0.24 -1.25,0.39 -0.08,0.03 -0.15,0.05 -0.23,0.08 -0.48,0.19 -0.96,0.4 -1.41,0.64 -0.03,0.01 -0.05,0.04 -0.08,0.05 -0.52,0.28 -1.03,0.58 -1.51,0.92 -0.01,0.01 -0.02,0.02 -0.04,0.03 -0.47,0.34 -0.92,0.7 -1.34,1.09 -0.05,0.04 -0.09,0.08 -0.14,0.13 -0.86,0.81 -1.61,1.72 -2.24,2.71 -0.06,0.09 -0.11,0.19 -0.17,0.28 -0.26,0.43 -0.5,0.88 -0.71,1.34 -0.04,0.08 -0.08,0.15 -0.11,0.23 -0.23,0.53 -0.43,1.07 -0.6,1.63 -0.03,0.11 -0.06,0.22 -0.09,0.33 -0.12,0.45 -0.22,0.92 -0.3,1.39 -0.03,0.16 -0.05,0.31 -0.07,0.47 -0.07,0.58 -0.13,1.18 -0.13,1.78 0,0 0,0 0,0 v 0 c 0,0.73 0.07,1.43 0.18,2.13 0.02,0.12 0.03,0.25 0.06,0.37 0.12,0.67 0.29,1.32 0.5,1.96 0.03,0.1 0.07,0.2 0.11,0.3 0.48,1.33 1.15,2.56 1.99,3.67 0.04,0.05 0.08,0.1 0.12,0.16 0.43,0.56 0.91,1.08 1.42,1.57 0.02,0.02 0.04,0.04 0.07,0.06 1.07,1 2.3,1.84 3.65,2.46 0,0 0.01,0 0.01,0 0.64,0.3 1.31,0.54 2,0.74 0.04,0.01 0.09,0.04 0.13,0.05 0.55,0.15 1.12,0.27 1.7,0.36 0.08,0.01 0.16,0.03 0.24,0.04 0.6,0.08 1.2,0.13 1.82,0.13 h 76.17 c 0.02,0 0.04,0 0.07,0 28.2,-0.02 58.31,-15.37 58.33,-58.36 0,-0.01 0,-0.02 0,-0.03 0,-0.01 0,-0.02 0,-0.03 v -30.63 c 0,-3.86 -1.57,-7.36 -4.1,-9.89 -2.53,-2.53 -6.03,-4.1 -9.89,-4.1 h -0.02 c -1.15,0.01 -2.24,0.17 -3.3,0.43 z" />
                <path d="m 492.66,459.28 c 0.96,3.95 3.58,7.25 7.1,9.09 1.93,1.01 4.13,1.59 6.46,1.59 h 30.73 c 20.14,0.03 30.35,10.26 30.35,30.42 0,0.02 0,0.04 0,0.06 v 0 76.11 c 0,0.55 0.04,1.09 0.1,1.62 0.01,0.13 0.04,0.25 0.06,0.37 0.06,0.41 0.13,0.82 0.23,1.22 0.03,0.12 0.06,0.24 0.09,0.36 0.11,0.42 0.24,0.84 0.39,1.25 0.03,0.08 0.05,0.15 0.08,0.23 0.19,0.48 0.4,0.96 0.64,1.41 0.01,0.03 0.04,0.05 0.05,0.08 0.28,0.52 0.58,1.03 0.92,1.51 0.01,0.01 0.02,0.02 0.03,0.04 0.34,0.47 0.7,0.92 1.09,1.34 0.04,0.05 0.08,0.09 0.13,0.14 0.81,0.86 1.72,1.61 2.71,2.24 0.09,0.06 0.19,0.11 0.28,0.17 0.43,0.26 0.88,0.5 1.34,0.71 0.08,0.04 0.15,0.08 0.23,0.11 0.53,0.23 1.07,0.43 1.63,0.6 0.11,0.03 0.22,0.06 0.33,0.09 0.45,0.12 0.92,0.22 1.39,0.3 0.16,0.03 0.31,0.05 0.47,0.07 0.58,0.07 1.18,0.13 1.78,0.13 0,0 0,0 0,0 v 0 c 0.73,0 1.43,-0.07 2.13,-0.18 0.12,-0.02 0.25,-0.03 0.37,-0.06 0.67,-0.12 1.32,-0.29 1.96,-0.5 0.1,-0.03 0.2,-0.07 0.3,-0.11 1.33,-0.48 2.56,-1.15 3.67,-1.99 0.05,-0.04 0.1,-0.08 0.16,-0.12 0.56,-0.43 1.08,-0.91 1.57,-1.42 0.02,-0.02 0.04,-0.04 0.06,-0.07 1,-1.07 1.84,-2.3 2.46,-3.65 0,0 0,-0.01 0,-0.01 0.3,-0.64 0.54,-1.31 0.74,-2 0.01,-0.04 0.04,-0.09 0.05,-0.13 0.15,-0.55 0.27,-1.12 0.36,-1.7 0.01,-0.08 0.03,-0.16 0.04,-0.24 0.08,-0.6 0.13,-1.2 0.13,-1.82 v -76.17 c 0,-0.02 0,-0.04 0,-0.07 -0.02,-28.2 -15.37,-58.31 -58.36,-58.33 -0.01,0 -0.02,0 -0.03,0 -0.01,0 -0.02,0 -0.03,0 h -30.63 c -3.86,0 -7.36,1.57 -9.89,4.1 -2.53,2.53 -4.1,6.03 -4.1,9.89 v 0.02 c 0.01,1.15 0.17,2.24 0.43,3.3 z" />
                <path d="m 633.61,523.56 c 3.95,-0.96 7.25,-3.58 9.09,-7.1 1.01,-1.93 1.59,-4.13 1.59,-6.46 v -30.73 c 0.03,-20.14 10.26,-30.35 30.42,-30.35 0.02,0 0.04,0 0.06,0 v 0 h 76.11 c 0.55,0 1.09,-0.04 1.62,-0.1 0.13,-0.01 0.25,-0.04 0.37,-0.06 0.41,-0.06 0.82,-0.13 1.22,-0.23 0.12,-0.03 0.24,-0.06 0.36,-0.09 0.42,-0.11 0.84,-0.24 1.25,-0.39 0.08,-0.03 0.15,-0.05 0.23,-0.08 0.48,-0.19 0.96,-0.4 1.41,-0.64 0.03,-0.01 0.05,-0.04 0.08,-0.05 0.52,-0.28 1.03,-0.58 1.51,-0.92 0.01,-0.01 0.02,-0.02 0.04,-0.03 0.47,-0.34 0.92,-0.7 1.34,-1.09 0.05,-0.04 0.09,-0.08 0.14,-0.13 0.86,-0.81 1.61,-1.72 2.24,-2.71 0.06,-0.09 0.11,-0.19 0.17,-0.28 0.26,-0.43 0.5,-0.88 0.71,-1.34 0.04,-0.08 0.08,-0.15 0.11,-0.23 0.23,-0.53 0.43,-1.07 0.6,-1.63 0.03,-0.11 0.06,-0.22 0.09,-0.33 0.12,-0.45 0.22,-0.92 0.3,-1.39 0.03,-0.16 0.05,-0.31 0.07,-0.47 0.07,-0.58 0.13,-1.18 0.13,-1.78 0,0 0,0 0,0 v 0 c 0,-0.73 -0.07,-1.43 -0.18,-2.13 -0.02,-0.12 -0.03,-0.25 -0.06,-0.37 -0.12,-0.67 -0.29,-1.32 -0.5,-1.96 -0.03,-0.1 -0.07,-0.2 -0.11,-0.3 -0.48,-1.33 -1.15,-2.56 -1.99,-3.67 -0.04,-0.05 -0.08,-0.1 -0.12,-0.16 -0.43,-0.56 -0.91,-1.08 -1.42,-1.57 -0.02,-0.02 -0.04,-0.04 -0.07,-0.06 -1.07,-1 -2.3,-1.84 -3.65,-2.46 0,0 -0.01,0 -0.01,0 -0.64,-0.3 -1.31,-0.54 -2,-0.74 -0.04,-0.01 -0.09,-0.04 -0.13,-0.05 -0.55,-0.15 -1.12,-0.27 -1.7,-0.36 -0.08,-0.01 -0.16,-0.03 -0.24,-0.04 -0.6,-0.08 -1.2,-0.13 -1.82,-0.13 H 674.7 c -0.02,0 -0.04,0 -0.07,0 -28.2,0.02 -58.31,15.37 -58.33,58.36 0,0.01 0,0.02 0,0.03 0,0.01 0,0.02 0,0.03 V 510 c 0,3.86 1.57,7.36 4.1,9.89 2.53,2.53 6.03,4.1 9.89,4.1 h 0.02 c 1.15,-0.01 2.24,-0.17 3.3,-0.43 z" />
              </g>
            </g>
          </svg>
        </div>
        <div className="icons">
          {loggedIn && (
            <div className="logout" onClick={logout}>
              <svg
                viewBox="0 0 16 16"
                fill="none"
                xmlns="http://www.w3.org/2000/svg">
                <path
                  fillRule="evenodd"
                  clipRule="evenodd"
                  d="M6.31111 11.2L7.55556 12.4444L12 8L7.55556 3.55556L6.31111 4.8L8.62222 7.11111H0V8.88889H8.62222L6.31111 11.2ZM14.2222 0H1.77778C0.8 0 0 0.8 0 1.77778V5.33333H1.77778V1.77778H14.2222V14.2222H1.77778V10.6667H0V14.2222C0 15.2 0.8 16 1.77778 16H14.2222C15.2 16 16 15.2 16 14.2222V1.77778C16 0.8 15.2 0 14.2222 0Z"
                />
              </svg>
            </div>
          )}
          <div className="exit" onClick={close}>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
              <g>
                <path d="M12.255 6.992a.75.75 0 1 0-1.023-1.097L9.037 7.94 6.992 5.745a.75.75 0 0 0-1.097 1.023L7.94 8.963l-2.195 2.045a.75.75 0 0 0 1.023 1.097l2.195-2.045 2.045 2.195a.75.75 0 0 0 1.097-1.023L10.06 9.037l2.195-2.045z" />
                <path
                  fillRule="evenodd"
                  d="M.75 9a8.25 8.25 0 1 1 16.5 0A8.25 8.25 0 1 1 .75 9zM9 15.75a6.75 6.75 0 1 1 0-13.5 6.75 6.75 0 1 1 0 13.5z"
                />
              </g>
            </svg>
          </div>
        </div>
      </div>
      <div className="body">
        <div className="connection">
          <svg viewBox="0 0 113 113" xmlns="http://www.w3.org/2000/svg">
            <g clipPath="url(#clip0_625_565)">
              <path
                d="M24.7188 63.5625H88.2812C101.912 63.5625 113 52.4744 113 38.8438C113 25.2131 101.912 14.125 88.2812 14.125H28.25C28.25 6.32094 21.9291 0 14.125 0C6.32094 0 0 6.32094 0 14.125C0 21.9291 6.32094 28.25 14.125 28.25C19.3371 28.25 23.843 25.3897 26.2937 21.1875H88.2812C98.0134 21.1875 105.938 29.1116 105.938 38.8438C105.938 48.5759 98.0134 56.5 88.2812 56.5H24.7188C11.0881 56.5 0 67.5881 0 81.2188C0 94.8494 11.0881 105.938 24.7188 105.938H86.7063C89.1499 110.14 93.6558 113 98.875 113C106.679 113 113 106.679 113 98.875C113 91.0709 106.679 84.75 98.875 84.75C91.0709 84.75 84.75 91.0709 84.75 98.875H24.7188C14.9866 98.875 7.0625 90.9509 7.0625 81.2188C7.0625 71.4866 14.9866 63.5625 24.7188 63.5625Z"
                fill="url(#paint0_linear_625_565)"
              />
            </g>
            <defs>
              <linearGradient
                id="paint0_linear_625_565"
                x1="56.5"
                y1="0"
                x2="56.5"
                y2="113"
                gradientUnits="userSpaceOnUse">
                <stop stopColor="#1F6E46" />
                <stop offset="1" stopColor="#484848" stopOpacity="0" />
              </linearGradient>
              <clipPath id="clip0_625_565">
                <rect width="113" height="113" fill="white" />
              </clipPath>
            </defs>
          </svg>
        </div>
        <div className="connection-text">
          {!loggedIn && <>Looks like you’re not connected.</>}
          {loggedIn && <>Connected to Lume Web.</>}
        </div>
        <div className="button-container">
          {loggedIn && (
            <button className="dashboard-btn" onClick={openDashboard}>
              <svg
                width=""
                height=""
                viewBox=""
                fill="none"
                xmlns="http://www.w3.org/2000/svg">
                <g clipPath="url(#clip0_625_287)">
                  <path
                    d="M0 8C0 9.58225 0.469192 11.129 1.34824 12.4446C2.22729 13.7602 3.47672 14.7855 4.93853 15.391C6.40034 15.9965 8.00887 16.155 9.56072 15.8463C11.1126 15.5376 12.538 14.7757 13.6569 13.6569C14.7757 12.538 15.5376 11.1126 15.8463 9.56072C16.155 8.00887 15.9965 6.40034 15.391 4.93853C14.7855 3.47672 13.7602 2.22729 12.4446 1.34824C11.129 0.469192 9.58225 0 8 0C5.87827 0 3.84344 0.842855 2.34315 2.34315C0.842855 3.84344 0 5.87827 0 8Z"
                    fill="#BFBFBF"
                  />
                  <path
                    d="M11.4999 10.545V12.0225C11.4999 12.0824 11.4763 12.1399 11.4342 12.1825C11.392 12.2251 11.3348 12.2494 11.2749 12.25H4.4999C4.44 12.2494 4.38277 12.2251 4.34065 12.1825C4.29852 12.1399 4.2749 12.0824 4.2749 12.0225V10.545C4.2749 9.35251 5.8924 8.38501 7.8874 8.38501C9.8824 8.38501 11.4999 9.35251 11.4999 10.545Z"
                    stroke="#1E1F21"
                    strokeWidth="2"
                    strokeMiterlimit="10"
                    strokeLinecap="round"
                  />
                  <path
                    d="M7.88747 6.84C8.77389 6.84 9.49247 6.14828 9.49247 5.295C9.49247 4.44172 8.77389 3.75 7.88747 3.75C7.00105 3.75 6.28247 4.44172 6.28247 5.295C6.28247 6.14828 7.00105 6.84 7.88747 6.84Z"
                    stroke="#1E1F21"
                    strokeWidth="2"
                    strokeMiterlimit="10"
                    strokeLinecap="round"
                  />
                </g>
                <defs>
                  <clipPath id="clip0_625_287">
                    <rect width="16" height="16" fill="white" />
                  </clipPath>
                </defs>
              </svg>
              <span>Dashboard</span>
            </button>
          )}
          {!loggedIn && (
            <button className="login-btn" onClick={openAccount}>
              <span>Login</span>
            </button>
          )}
        </div>
      </div>
    </>
  );
}