import { Connection, state, session } from "@app/lib/session";

  import { getWallet } from "@app/lib/wallet";

  import { initialize, activeRouteStore } from "@app/lib/router";

  import { twemoji, unreachable } from "@app/lib/utils";

  import ColorPalette from "./App/ColorPalette.svelte";

  import Header from "./App/Header.svelte";

  import Loading from "@app/components/Loading.svelte";

  import Modal from "@app/components/Modal.svelte";

  import NotFound from "@app/components/NotFound.svelte";

  import Faucet from "@app/views/faucet/Routes.svelte";

  import Home from "@app/views/home/Index.svelte";

  import Profile from "@app/views/profiles/Profile.svelte";

  import Projects from "@app/views/projects/View.svelte";

  import Registrations from "@app/views/registrations/Routes.svelte";

  import Seeds from "@app/views/seeds/Routes.svelte";

  import Vesting from "@app/views/vesting/Routes.svelte";

<script lang="ts">

  function extractCssVariables(variableName: string) {

    return Array.from(document.styleSheets)

      .filter(

        sheet =>

          sheet.href === null || sheet.href.startsWith(window.location.origin),

      )

      .reduce<string[]>(

        (acc, sheet) =>

          (acc = [

            ...acc,

            // eslint-disable-next-line @typescript-eslint/ban-ts-comment

            // @ts-ignore

            ...Array.from(sheet.cssRules).reduce(

              (def, rule) =>

                // eslint-disable-next-line @typescript-eslint/ban-ts-comment

                // @ts-ignore

                (def =

                  // eslint-disable-next-line @typescript-eslint/ban-ts-comment

                  // @ts-ignore

                  rule.selectorText === ":root"

                    ? [

                        ...def,

                        // eslint-disable-next-line @typescript-eslint/ban-ts-comment

                        // @ts-ignore

                        ...Array.from(rule.style).filter(name =>

                          // eslint-disable-next-line @typescript-eslint/ban-ts-comment

                          // @ts-ignore

                          name.startsWith(variableName),

                        ),

                      ]

                    : def),

              [],

            ),

          ]),

        [],

      );

  }

  // rg "\--color-\w*(-\d)*" -o --no-line-number --no-filename -g "\!public/colors.css" -g "\!src/ColorPalette.svelte" | sort | uniq | jq -sRM 'split("\n")[:-1]'

  const usedColors = [

    "--color-background",

    "--color-caution",

    "--color-caution-2",

    "--color-caution-3",

    "--color-caution-6",

    "--color-foreground",

    "--color-foreground-1",

    "--color-foreground-2",

    "--color-foreground-3",

    "--color-foreground-4",

    "--color-foreground-5",

    "--color-foreground-6",

    "--color-negative",

    "--color-negative-1",

    "--color-negative-2",

    "--color-negative-3",

    "--color-negative-4",

    "--color-negative-5",

    "--color-negative-6",

    "--color-positive",

    "--color-positive-1",

    "--color-positive-2",

    "--color-positive-3",

    "--color-positive-6",

    "--color-primary",

    "--color-primary-3",

    "--color-primary-5",

    "--color-secondary",

    "--color-secondary-1",

    "--color-secondary-2",

    "--color-secondary-3",

    "--color-secondary-5",

    "--color-secondary-6",

    "--color-tertiary",

    "--color-tertiary-1",

    "--color-tertiary-2",

    "--color-tertiary-6",

  ];

  const colors = extractCssVariables("--color");

  const colorGroups = [

    ...new Set(

      colors.map(color => {

        const match = color.match(/--color-(\w*)-?/);

        if (match) {

          return match[1];

        } else {

          return "";

        }

      }),

    ),

  ];

  let show = false;

  let checkers = false;

  const onKeydown = (event: KeyboardEvent) => {

    if (import.meta.env.PROD) {

      return;

    }

    const hasInputTarget =

      event.target &&

      ((event.target as HTMLInputElement).type === "text" ||

        (event.target as HTMLTextAreaElement).type === "textarea");

    if (

      hasInputTarget ||

      event.repeat ||

      event.altKey ||

      event.metaKey ||

      event.ctrlKey

    ) {

      return false;

    }

    if (event.key === "d") {

      show = !show;

    }

  };

  function clickOutside(ev: MouseEvent) {

    if (thisComponent && !thisComponent.contains(ev.target as HTMLDivElement)) {

      show = !show;

    }

  }

  let thisComponent: HTMLDivElement;

</script>

<style>

  .container {

    position: fixed;

    background: var(--color-background);

    padding: 2rem;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    box-shadow: var(--elevation-low);

    border-radius: 1rem;

    z-index: 100;

    min-width: 46rem;

  }

  .checkers {

    background: repeating-conic-gradient(#88888833 0% 25%, transparent 0% 50%)

      50% / 20px 20px;

    border-radius: 1rem;

  }

  .color {

    width: 4rem;

    height: 4rem;

    border-radius: 0.5rem;

    outline-style: solid !important;

    outline-color: #88888899 !important;

    outline-offset: 0.5rem;

    margin: 1rem;

  }

  .unused {

    outline-style: dotted !important;

    outline-color: #55555555 !important;

  }

</style>

<svelte:window on:keydown={onKeydown} on:click={clickOutside} />

{#if show}

  <!-- svelte-ignore a11y-click-events-have-key-events -->

  <div

    bind:this={thisComponent}

    class="container"

    on:click={() => (checkers = !checkers)}>

    <div class:checkers>

      {#each colorGroups as colorGroup}

        <div>

          {#each colors.filter(color => {

            return color.match(`--color-${colorGroup}`);

          }) as color}

            <div style="display: inline-flex;">

              <div

                class:unused={!usedColors.includes(color)}

                title={color}

                class="color"

                style={`background-color: var(${color});`} />

            </div>

          {/each}

        </div>

      {/each}

    </div>

  </div>

{/if}

<script lang="ts">

  import type { Wallet } from "@app/lib/wallet";

  import type { ProjectsAndProfiles } from "./Header/Search.svelte";

  import type { Session } from "@app/lib/session";

  import Avatar from "@app/components/Avatar.svelte";

  import Button from "@app/components/Button.svelte";

  import Connect from "@app/components/Connect.svelte";

  import Floating from "@app/components/Floating.svelte";

  import Icon from "@app/components/Icon.svelte";

  import Link from "@app/components/Link.svelte";

  import Loading from "@app/components/Loading.svelte";

  import SettingsDropdown from "./Header/SettingsDropdown.svelte";

  import Logo from "./Header/Logo.svelte";

  import Search from "./Header/Search.svelte";

  import SearchResults from "./Header/SearchResults.svelte";

  import { Profile, ProfileType } from "@app/lib/profile";

  import { closeFocused } from "@app/components/Floating.svelte";

  import { disconnectWallet } from "@app/lib/session";

  import { formatAddress, formatBalance } from "@app/lib/utils";

  export let session: Session | null;

  export let wallet: Wallet;

  let query: string;

  let results: ProjectsAndProfiles | null = null;

  let sessionButtonHover = false;

  $: address = session && session.address;

  $: tokenBalance = session && session.tokenBalance;

</script>

<style>

  header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin: 0;

    padding: 1.5rem;

    height: 5.5rem;

  }

  .left,

  .right {

    display: flex;

    align-items: center;

    height: var(--button-regular-height);

    gap: 1rem;

  }

  .logo {

    display: flex;

    height: var(--button-regular-height);

    align-items: center;

    margin-right: 0.5rem;

  }

  .search {

    width: 16rem;

  }

  .connect {

    display: inline-block;

  }

  .network {

    color: var(--color-tertiary-6);

    background-color: var(--color-tertiary-1);

    line-height: 1.5em;

    padding: 0rem 1rem;

    height: var(--button-regular-height);

    display: flex;

    align-items: center;

    border-radius: var(--border-radius-round);

  }

  .network:hover {

    background-color: var(--color-tertiary-3);

  }

  .network.unavailable {

    color: var(--color-foreground-5);

    background-color: var(--color-foreground-3);

  }

  .network:last-child {

    margin-right: 0;

  }

  .register {

    display: inline-block;

    padding: 0.5rem 0.5rem;

    cursor: pointer;

    user-select: none;

    color: var(--color-foreground);

  }

  .register:hover {

    color: var(--color-foreground);

  }

  .balance {

    white-space: nowrap;

  }

  @media (max-width: 720px) {

    header .right {

      gap: 1rem;

    }

    .network,

    .search,

    .register,

    .balance {

      display: none;

    }

  }

  .modal {

    background: var(--color-background);

    border-radius: var(--border-radius);

    box-shadow: var(--elevation-low);

    max-width: 22.5rem;

    min-width: 18rem;

    padding: 1.5rem;

    position: absolute;

    right: 1.5rem;

    top: 5rem;

  }

  .modal-register {

    color: var(--color-foreground);

    padding-left: 0.5rem;

  }

  .modal-register:hover {

    color: var(--color-foreground);

  }

  .toggle {

    width: 2.5rem;

    height: 2.5rem;

    border-radius: var(--border-radius-round);

    border: 1px solid var(--color-foreground);

    display: flex;

    justify-content: center;

    align-items: center;

    background-color: transparent;

    color: var(--color-foreground);

  }

  .toggle:hover {

    background-color: var(--color-foreground);

    color: var(--color-background);

  }

</style>

<header>

  <div class="left">

    <Link route={{ resource: "home" }}><span class="logo"><Logo /></span></Link>

    <div class="search">

      <Search

        {wallet}

        on:search={e => {

          ({ query, results } = e.detail);

        }} />

    </div>

  </div>

  <div class="right">

    {#if wallet && wallet.network.name === "goerli"}

      <Link

        route={{

          resource: "faucet",

          params: { view: { resource: "form" } },

        }}>

        <span class="network">Goerli</span>

      </Link>

    {:else if wallet && wallet.network.name === "homestead"}

      <!-- Don't show anything -->

    {:else}

      <span class="network unavailable">No Network</span>

    {/if}

    <Link

      route={{

        resource: "registrations",

        params: { view: { resource: "validateName" } },

      }}>

      <span class="register">Register</span>

    </Link>

    {#if address}

      <span class="balance">

        {#if tokenBalance}

          {formatBalance(tokenBalance)}

          <span class="txt-bold">RAD</span>

        {:else}

          <Loading small />

        {/if}

      </span>

      <Button

        style="width: 10rem; white-space: nowrap;"

        variant="foreground"

        on:click={() => disconnectWallet(wallet)}

        on:mouseover={() => (sessionButtonHover = true)}

        on:focus={() => (sessionButtonHover = true)}

        on:mouseout={() => (sessionButtonHover = false)}

        on:blur={() => (sessionButtonHover = false)}>

        {#await Profile.get(address, ProfileType.Minimal, wallet)}

          <Loading small center />

        {:then profile}

          {#if sessionButtonHover}

            Disconnect

          {:else}

            <Avatar

              source={profile.avatar ?? address}

              title={address}

              inline />{formatAddress(address)}

          {/if}

        {/await}

      </Button>

    {:else if wallet}

      <span class="connect">

        <Connect buttonVariant="foreground" {wallet} />

      </span>

    {/if}

    <Floating>

      <div slot="toggle">

        <button class="toggle" name="Settings">

          <Icon name="gear" />

        </button>

      </div>

      <SettingsDropdown slot="modal" />

    </Floating>

    <div class="layout-mobile">

      <Floating>

        <div slot="toggle">

          <span style="transform: scale(1.2);">

            <Icon name="ellipsis" />

          </span>

        </div>

        <svelte:fragment slot="modal">

          <div class="modal">

            <div style="padding-bottom: 1rem;">

              <Search

                {wallet}

                on:finished={() => {

                  closeFocused();

                }}

                on:search={e => {

                  ({ query, results } = e.detail);

                }} />

            </div>

            <Link

              route={{

                resource: "registrations",

                params: { view: { resource: "validateName" } },

              }}

              on:click={() => {

                closeFocused();

              }}>

              <span class="modal-register">Register</span>

            </Link>

          </div>

        </svelte:fragment>

      </Floating>

    </div>

  </div>

  {#if results}

    <SearchResults

      {wallet}

      {results}

      {query}

      on:close={() => {

        results = null;

      }} />

  {/if}

</header>

<script lang="ts">

  export let style = "";

</script>

<style>

</style>

<svg

  {style}

  width="36"

  height="34"

  viewBox="0 0 36 34"

  fill="none"

  xmlns="http://www.w3.org/2000/svg">

  <path

    fill-rule="evenodd"

    clip-rule="evenodd"

    d="M18.5687 19.0417C18.8572 18.2253 19.1389 17.3905 19.4228 16.5491C21.8513 9.35112 24.4399 1.67842 32.8537 1.04244C33.2252 1.01436 33.608 0.999997 34.0027 1C33.8296 1.23078 33.6991 1.57621 33.5907 2.00565C33.4423 2.59325 33.3351 3.33814 33.2167 4.16182C32.9561 5.97456 32.6405 8.16891 31.7092 9.90809C29.8743 13.3345 24.8285 15.024 22.3056 14.4765C19.91 17.0735 19.3178 22.4338 19.6913 26.411C19.7597 27.1398 19.9076 27.8537 20.0495 28.5387C20.2456 29.4852 20.4302 30.3765 20.3779 31.1756C20.2485 33.6081 15.8912 33.6081 15.7618 31.1756C15.7095 30.3765 15.8941 29.4852 16.0902 28.5387C16.2321 27.8537 16.38 27.1398 16.4484 26.411C16.4675 26.2077 16.4867 26.0074 16.5057 25.8098C16.851 22.2059 17.1059 19.5453 14.9571 17.3278C14.7314 17.095 14.4792 16.867 14.1979 16.6433C14.0258 16.9617 13.8419 17.2404 13.65 17.4841C12.3774 19.0998 10.747 19.1773 9.79299 19.0722C7.61437 18.8321 6.17 17.0674 4.7655 15.3513C4.19335 14.6522 3.62781 13.9612 3.02196 13.3847C2.73293 13.1097 2.43473 12.8607 2.12225 12.6493C2.50137 12.4981 2.88393 12.3708 3.26863 12.2664C8.84538 10.7528 14.8744 14.0475 17.488 19.1056C17.7066 19.5286 17.9013 19.964 18.0699 20.4099C18.2394 19.9612 18.4052 19.5044 18.5687 19.0417ZM17.9276 17.8531C18.1082 17.3281 18.2871 16.7974 18.4681 16.2608C18.7688 15.3688 19.0751 14.4605 19.4034 13.5352C20.1931 11.3094 21.0827 9.07249 22.24 7.08373C23.3997 5.09089 24.849 3.31009 26.777 2.02993C28.7159 0.742458 31.0812 -2.21724e-05 34.0028 4.96602e-10L36 1.51401e-05L34.7986 1.60152C34.7172 1.71 34.5923 2.01783 34.4627 2.67346C34.3703 3.14034 34.2933 3.67532 34.2058 4.28372C34.1774 4.48175 34.1477 4.68756 34.1161 4.90133C33.8683 6.5769 33.5108 8.656 32.5867 10.3815C31.5278 12.359 29.5921 13.7639 27.6601 14.6007C25.9891 15.3244 24.1674 15.6886 22.7093 15.5483C21.8724 16.6529 21.2826 18.2584 20.9395 20.1091C20.5575 22.1692 20.504 24.4096 20.6831 26.3172C20.7459 26.9858 20.8806 27.6368 21.0222 28.3216C21.05 28.4558 21.078 28.5913 21.1058 28.7285C21.2666 29.5219 21.4262 30.3985 21.3724 31.2354C21.3203 32.1765 20.8453 32.8995 20.1952 33.3606C19.5677 33.8056 18.7957 34 18.0699 34C17.344 34 16.572 33.8056 15.9446 33.3606C15.2944 32.8995 14.8193 32.1764 14.7673 31.2353C14.7135 30.3984 14.8731 29.5219 15.0339 28.7285C15.0617 28.5913 15.0897 28.4558 15.1175 28.3216C15.2591 27.6368 15.3938 26.9858 15.4566 26.3172C15.475 26.1207 15.4933 25.9286 15.5113 25.7404C15.6955 23.8092 15.8394 22.3004 15.6535 20.9804C15.5062 19.9343 15.1504 19.0223 14.3789 18.1701C13.7456 18.9517 13.02 19.4494 12.2823 19.7434C11.2786 20.1434 10.3271 20.1371 9.68428 20.0662C7.5339 19.8293 6.04107 18.3873 4.8627 17.0257C4.56533 16.6821 4.2767 16.3294 3.9997 15.991L3.99119 15.9806C3.70843 15.6351 3.4379 15.3048 3.16528 14.9905C2.61589 14.3573 2.10048 13.8405 1.56544 13.4785L0 12.4195L1.75443 11.7199C7.89421 9.27172 14.7119 12.5328 17.9276 17.8531Z"

    fill="url(#paint0_radial)"

    fill-opacity="0.84" />

  <defs>

    <radialGradient

      id="paint0_radial"

      cx="0"

      cy="0"

      r="1"

      gradientUnits="userSpaceOnUse"

      gradientTransform="translate(14.6116 21.5361) rotate(67.3618) scale(26.8971 26.8264)">

      <stop stop-color="#5555FF" />

      <stop offset="1" stop-color="#FF55FF" />

    </radialGradient>

  </defs>

</svg>

<script lang="ts" context="module">

  import type { Host } from "@app/lib/api";

  import type { ProjectInfo } from "@app/lib/project";

  import { ethers } from "ethers";

  import * as utils from "@app/lib/utils";

  import { Profile } from "@app/lib/profile";

  import { Project } from "@app/lib/project";

  import { config } from "@app/lib/config";

  export interface ProjectsAndProfiles {

    projects: { info: ProjectInfo; seed: Host }[];

    profiles: Profile[];

  }

  type SearchResult =

    | { type: "nothing" }

    | { type: "error"; message: string }

    | { type: "singleProfile"; id: string }

    | { type: "singleProject"; seedHost: string; id: string }

    | { type: "projectsAndProfiles"; projectsAndProfiles: ProjectsAndProfiles };

  async function searchProjectsAndProfiles(

    query: string,

    wallet: Wallet,

  ): Promise<SearchResult> {

    try {

      // The query is a plain Ethereum address.

      if (ethers.utils.isAddress(query)) {

        return { type: "singleProfile", id: query };

      }

      const projectOnSeeds = config.seeds.pinned.map(seed => ({

        nameOrUrn: query,

        seed: seed.host,

      }));

      // The query is a radicle project URN.

      if (utils.isRadicleId(query)) {

        const projects = await Project.getMulti(projectOnSeeds);

        if (projects.length === 1) {

          return {

            type: "singleProject",

            seedHost: projects[0].seed.host,

            id: query,

          };

        } else if (projects.length === 0) {

          return { type: "nothing" };

        } else {

          return {

            type: "projectsAndProfiles",

            projectsAndProfiles: { projects, profiles: [] },

          };

        }

      }

      // The query is either a project or a profile name.

      const normalizedQuery = query.toLowerCase();

      const projectsAndProfiles: ProjectsAndProfiles = {

        projects: [],

        profiles: [],

      };

      try {

        const projects = await Project.getMulti(projectOnSeeds);

        projectsAndProfiles.projects.push(...projects);

      } catch {

        // TODO: collect errors and forward to user.

      }

      try {

        let params: string[];

        if (utils.isENSName(normalizedQuery, wallet)) {

          params = [normalizedQuery];

        } else {

          params = [

            `${normalizedQuery}.${wallet.registrar.domain}`,

            `${normalizedQuery}.eth`,

          ];

        }

        const profiles = await Profile.getMulti(params, wallet);

        projectsAndProfiles.profiles.push(...profiles);

      } catch {

        // TODO: collect errors and forward to user.

      }

      const projectCount = projectsAndProfiles.projects.length;

      const profileCount = projectsAndProfiles.profiles.length;

      if (profileCount === 1 && projectCount === 0) {

        return {

          type: "singleProfile",

          id: projectsAndProfiles.profiles[0].address,

        };

      }

      if (profileCount === 0 && projectCount === 1) {

        return {

          type: "singleProject",

          seedHost: projectsAndProfiles.projects[0].seed.host,

          id: query,

        };

      }

      if (profileCount > 0 || projectCount > 0) {

        return {

          type: "projectsAndProfiles",

          projectsAndProfiles,

        };

      }

      return { type: "nothing" };

    } catch (error) {

      let message = "An unknown error occoured while searching.";

      if (error instanceof Error) {

        message = error.message;

      }

      return { type: "error", message };

    }

  }

</script>

<script lang="ts" strictEvents>

  import type { Wallet } from "@app/lib/wallet";

  import debounce from "lodash/debounce";

  import { createEventDispatcher } from "svelte";

  import * as router from "@app/lib/router";

  import TextInput from "@app/components/TextInput.svelte";

  import { unreachable } from "@app/lib/utils";

  export let wallet: Wallet;

  const dispatch = createEventDispatcher<{

    finished: never;

    search: { query: string; results: ProjectsAndProfiles };

  }>();

  let input = "";

  let loading = false;

  let shaking = false;

  function shake() {

    shaking = true;

    debounce(() => (shaking = false), 500)();

  }

  async function search() {

    if (!valid) {

      return;

    }

    loading = true;

    const query = input;

    const searchResult = await searchProjectsAndProfiles(input, wallet);

    if (searchResult.type === "nothing") {

      shake();

    } else if (searchResult.type === "error") {

      // TODO: show some kind of notification to the user.

      shake();

    } else if (searchResult.type === "singleProfile") {

      input = "";

      router.push({

        resource: "profile",

        params: { addressOrName: searchResult.id },

      });

      dispatch("finished");

    } else if (searchResult.type === "singleProject") {

      input = "";

      router.push({

        resource: "projects",

        params: {

          view: { resource: "tree" },

          urn: searchResult.id,

          peer: undefined,

          profile: undefined,

          seed: searchResult.seedHost,

          hash: undefined,

          search: undefined,

        },

      });

      dispatch("finished");

    } else if (searchResult.type === "projectsAndProfiles") {

      // TODO: show some kind of notification about any errors to the user.

      input = "";

      dispatch("search", {

        query,

        results: searchResult.projectsAndProfiles,

      });

      dispatch("finished");

    } else {

      unreachable(searchResult);

    }

    loading = false;

  }

  $: valid = input !== "";

</script>

<style>

  .search-bar {

    display: flex;

  }

  .shaking {

    animation: horizontal-shaking 0.35s;

  }

  @keyframes horizontal-shaking {

    0% {

      transform: translateX(0);

    }

    25% {

      transform: translateX(5px);

    }

    50% {

      transform: translateX(-5px);

    }

    75% {

      transform: translateX(5px);

    }

    100% {

      transform: translateX(0);

    }

  }

</style>

<div class="search-bar" class:shaking>

  <TextInput

    variant="dashed"

    valid={input !== ""}

    {loading}

    disabled={loading}

    bind:value={input}

    on:submit={search}

    placeholder="Search a name or address…" />

</div>

<script lang="ts" strictEvents>

  import Modal from "@app/components/Modal.svelte";

  import { formatRadicleUrn, getSeedEmoji, twemoji } from "@app/lib/utils";

  import type { Wallet } from "@app/lib/wallet";

  import Address from "@app/components/Address.svelte";

  import Button from "@app/components/Button.svelte";

  import { createEventDispatcher } from "svelte";

  import type { ProjectsAndProfiles } from "./Search.svelte";

  import Link from "@app/components/Link.svelte";

  export let query: string;

  export let results: ProjectsAndProfiles;

  export let wallet: Wallet;

  const dispatch = createEventDispatcher<{ close: never }>();

</script>

<style>

  .results {

    text-align: left;

  }

  ul {

    list-style-type: none;

    padding: 0;

  }

  li {

    margin: 0.5rem 0;

  }

  .urn {

    color: var(--color-foreground-5);

  }

</style>

<svelte:window on:click={() => dispatch("close")} />

<Modal center floating>

  <span slot="title" use:twemoji>️🔍</span>

  <span slot="subtitle">

    <p class="txt-highlight txt-medium">

      <span class="txt-bold">

        Results for <q>{query}</q>

      </span>

    </p>

  </span>

  <span class="results" slot="body">

    {#if results.projects.length > 0}

      <p class="txt-highlight txt-medium">Projects</p>

      <ul>

        {#each results.projects as project}

          <li>

            <Link

              route={{

                resource: "projects",

                params: {

                  view: { resource: "tree" },

                  seed: project.seed.host,

                  urn: project.info.urn,

                },

              }}>

              <span title={project.seed.host}>

                <span>

                  {getSeedEmoji(project.seed.host)} {project.info.name}

                </span>

                <span class="urn">

                   {formatRadicleUrn(project.info.urn)}

                </span>

              </span>

            </Link>

          </li>

        {/each}

      </ul>

    {/if}

    {#if results.profiles.length > 0}

      <p class="txt-highlight txt-medium">ENS names</p>

      <ul>

        {#each results.profiles as profile}

          <li>

            <Address address={profile.address} {profile} {wallet} resolve />

          </li>

        {/each}

      </ul>

    {/if}

  </span>

  <span slot="actions">

    <Button variant="foreground" on:click={() => dispatch("close")}>

      Close

    </Button>

  </span>

</Modal>

<script lang="ts">

  import type { CodeFont } from "@app/lib/appearance";

  import Icon from "@app/components/Icon.svelte";

  import ThemeToggle from "./ThemeToggle.svelte";

  import { codeFont, storeCodeFont } from "@app/lib/appearance";

  import { codeFonts } from "@app/lib/appearance";

  import { quadIn } from "svelte/easing";

  import { slide } from "svelte/transition";

  let showFonts = false;

  $: document.documentElement.setAttribute("data-codefont", $codeFont);

  const switchFont = (font: CodeFont) => {

    codeFont.set(font);

    storeCodeFont(font);

  };

</script>

<style>

  .dropdown {

    position: absolute;

    top: 5rem;

    right: 1.5rem;

    width: 16.5rem;

    background: var(--color-foreground-1);

    border-radius: var(--border-radius);

    display: flex;

    flex-direction: column;

    align-items: center;

    color: var(--color-foreground-6);

    box-shadow: var(--elevation-low);

  }

  .dropdown:hover :last-child {

    border-bottom-left-radius: var(--border-radius);

    border-bottom-right-radius: var(--border-radius);

  }

  .item {

    width: 100%;

    display: flex;

    flex-direction: row;

    justify-content: space-between;

    align-items: center;

    height: 2.5rem;

    padding: 0 0.8rem;

    font-weight: 600;

    line-height: 2.5rem;

    user-select: none;

  }

  .item:first-of-type {

    border-bottom: 1px solid var(--color-foreground-3);

  }

  .selector {

    display: flex;

    flex-direction: row;

    align-items: center;

    justify-content: space-between;

    cursor: pointer;

  }

  .fonts {

    width: 100%;

  }

  .fonts > .item {

    border-bottom: none;

  }

  .font {

    color: var(--color-foreground-5);

    cursor: pointer;

  }

  .font:last-of-type {

    border-bottom-left-radius: var(--border-radius);

    border-bottom-right-radius: var(--border-radius);

  }

  .selector:hover {

    background-color: var(--color-foreground-3);

    color: var(--color-foreground-6);

  }

  .font:hover {

    background-color: var(--color-foreground-3);

    color: var(--color-foreground-5);

  }

  .active,

  .active:hover {

    color: var(--color-foreground-6);

  }

</style>

<div class="dropdown">

  <div class="item">

    <span>Theme</span>

    <ThemeToggle />

  </div>

  <!-- svelte-ignore a11y-click-events-have-key-events -->

  <div

    class="item selector"

    on:click|stopPropagation={() => (showFonts = !showFonts)}>

    <div>Code font</div>

    <Icon name={`chevron-${showFonts ? "up" : "down"}`} />

  </div>

  {#if showFonts}

    <div

      class="fonts"

      transition:slide|local={{ duration: 150, easing: quadIn }}>

      {#each codeFonts as font}

        {@const isSelectedFont = $codeFont === font.storedName}

        <!-- svelte-ignore a11y-click-events-have-key-events -->

        <div

          on:click={() => switchFont(font.storedName)}

          class="item font"

          class:active={isSelectedFont}

          style:font-family={font.fontFamily}>

          {font.displayName}

          {#if isSelectedFont}

            <Icon name="checkmark" />

          {/if}

        </div>

      {/each}

    </div>

  {/if}

</div>

<script lang="ts">

  import Icon from "@app/components/Icon.svelte";

  import Toggle from "@app/components/Toggle.svelte";

  import { theme, storeTheme } from "@app/lib/appearance";

  $: document.documentElement.setAttribute("data-theme", $theme);

</script>

<style>

  .theme {

    display: flex;

    justify-content: center;

    align-items: center;

    user-select: none;

    gap: 0.5rem;

    cursor: pointer;

  }

</style>

<div class="theme">

  <Icon name="sun" on:click={() => theme.set("light")} />

  <Toggle

    checked={$theme === "dark"}

    on:change={() => {

      theme.set($theme === "dark" ? "light" : "dark");

      storeTheme($theme);

    }} />

  <Icon name="moon" on:click={() => theme.set("dark")} />

</div>