This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.

Ported for vimjoyer.com from the Firefox 157.0 New Tab page: https://searchfox.org/mozilla-release/source/browser/extensions/newtab

import { For } from "solid-js";

import wikipediaIcon from "../../assets/firefox/tippytop-wikipedia-org@2x.png";
import youtubeIcon from "../../assets/firefox/tippytop-youtube-com@2x.png";
import redditIcon from "../../assets/firefox/tippytop-reddit-com@2x.png";
import addonsIcon from "../../assets/firefox/tippytop-addons-mozilla@2x.png";
import "./firefox-newtab.css";
import { fill } from "../sim/fact.ts";
import { NEW_TAB, NEW_TAB_SHORTCUTS, NEW_TAB_SITE_MENU } from "../sim/facts/firefox.ts";

const [LOGO, SEARCH, SHORTCUTS, MENU, ADD_SHORTCUT, CUSTOMIZE] = NEW_TAB.text;
const SHORTCUT = NEW_TAB_SHORTCUTS.text.map(line => line.split(" https://")[0] ?? line);

export type FirefoxNewTabSearch = "idle" | "focused" | "disabled";

type FirefoxNewTabProps = {
  onSearchFocus: () => void;
  onUnavailable: (what: string) => void;
  search?: FirefoxNewTabSearch;
};

const FIREFOX_NEWTAB_SHORTCUTS = [
  { title: SHORTCUT[0], url: "https://www.wikipedia.org/", icon: wikipediaIcon.src, fallback: "W" },
  { title: SHORTCUT[1], url: "https://www.youtube.com/", icon: youtubeIcon.src, fallback: "Y" },
  { title: SHORTCUT[2], url: "https://www.reddit.com/", icon: redditIcon.src, fallback: "R" },
  { title: SHORTCUT[3], url: "https://addons.mozilla.org/", icon: addonsIcon.src, fallback: "A" },
] as const;

const FIREFOX_NEWTAB_TEXT = {
  logo: LOGO,
  search: SEARCH,
  shortcuts: SHORTCUTS,
  menu: MENU,
  menuFor: (title: string) => fill(NEW_TAB_SITE_MENU, { title }),
  addShortcut: ADD_SHORTCUT,
  customize: CUSTOMIZE,
} as const;

export default function FirefoxNewTab(props: FirefoxNewTabProps) {
  const unavailable = (what: string) => (event: MouseEvent) => {
    event.preventDefault();
    props.onUnavailable(what);
  };

  return (
    <div class="firefox-newtab">
      <div class="firefox-newtab-page">
        <div class="nova-outer-wrapper">
          <div class="container nova-enabled logo-in-content">
            <aside class="sidebar-inline-start" />
            <aside class="sidebar-inline-end" />
            <main class="content-main">
              <div class="content">
                <h1 class="logo-and-wordmark-wrapper">
                  <div class="logo-and-wordmark" role="img" aria-label={FIREFOX_NEWTAB_TEXT.logo}>
                    <div class="logo" />
                    <div class="wordmark" />
                  </div>
                </h1>
                <div class="sticky-search-sentinel" aria-hidden="true" />
                <div class="search-wrapper">
                  <div class="search-inner-wrapper">
                    <div
                      class="content-search-handoff-ui"
                      classList={{ fakefocus: props.search === "focused" || props.search === "disabled", disabled: props.search === "disabled" }}
                      style={{ "--caret-blink-count": "5", "--caret-blink-time": "2400ms" }}
                    >
                      <button
                        type="button"
                        class="search-handoff-button"
                        tabindex="-1"
                        title={FIREFOX_NEWTAB_TEXT.search}
                        aria-label={FIREFOX_NEWTAB_TEXT.search}
                        onMouseDown={event => event.preventDefault()}
                        onClick={event => {
                          event.preventDefault();
                          props.onSearchFocus();
                        }}
                      >
                        <div class="fake-textbox">{FIREFOX_NEWTAB_TEXT.search}</div>
                        <div class="fake-caret" />
                      </button>
                    </div>
                  </div>
                </div>
                <section class="top-sites" data-section-id="topsites">
                  <div class="top-sites-list-wrapper">
                    <ul role="group" aria-label={FIREFOX_NEWTAB_TEXT.shortcuts} class="top-sites-list" style={{ "--top-sites-max-per-row": "8" }}>
                      <For each={FIREFOX_NEWTAB_SHORTCUTS}>
                        {site => (
                          <li class="top-site-outer">
                            <div class="top-site-inner">
                              <a
                                class="top-site-button"
                                href={site.url}
                                draggable={false}
                                aria-label={site.title}
                                title={site.title}
                                onClick={unavailable(site.title)}
                              >
                                <div class="tile" aria-hidden="true">
                                  <div class="icon-stack">
                                    <div class="icon-wrapper" data-fallback={site.fallback}>
                                      <div class="top-site-icon rich-icon" style={{ "background-image": `url("${site.icon}")` }} />
                                    </div>
                                  </div>
                                </div>
                                <div class="top-site-title">
                                  <span class="title-label" dir="auto">{site.title}</span>
                                </div>
                              </a>
                              <div>
                                <button
                                  type="button"
                                  class="context-menu-button icon"
                                  aria-haspopup="menu"
                                  aria-expanded="false"
                                  title={FIREFOX_NEWTAB_TEXT.menu}
                                  aria-label={FIREFOX_NEWTAB_TEXT.menuFor(site.title)}
                                  onClick={unavailable(FIREFOX_NEWTAB_TEXT.menu)}
                                />
                              </div>
                            </div>
                          </li>
                        )}
                      </For>
                      <li class="top-site-outer add-button-tile">
                        <span class="moz-button add-button">
                          <button
                            type="button"
                            title={FIREFOX_NEWTAB_TEXT.addShortcut}
                            aria-label={FIREFOX_NEWTAB_TEXT.addShortcut}
                            onClick={unavailable(FIREFOX_NEWTAB_TEXT.addShortcut)}
                          >
                            <span class="button-background" data-type="primary" data-size="large">
                              <span class="button-icon plus-icon" />
                            </span>
                          </button>
                        </span>
                      </li>
                    </ul>
                  </div>
                  <div class="edit-topsites-wrapper" />
                </section>
              </div>
            </main>
          </div>
        </div>
      </div>
      <menu class="personalizeButtonWrapper nova-enabled">
        <span>
          <span class="moz-button open-customization-button">
            <button
              type="button"
              aria-expanded="false"
              aria-haspopup="dialog"
              onClick={unavailable(FIREFOX_NEWTAB_TEXT.customize)}
            >
              <span class="button-background labelled" data-type="primary" data-size="default">
                <span class="moz-button-label">
                  <span class="text">{FIREFOX_NEWTAB_TEXT.customize}</span>
                </span>
                <span class="button-icon edit-icon" />
              </span>
            </button>
          </span>
        </span>
      </menu>
    </div>
  );
}