import { ipcRenderer } from "electron";
import _ from "lodash";
import React, { useEffect, useState } from "react";
import { Button } from "antd";
import { PageHeader } from "@ant-design/pro-layout";
import { useTranslation } from "react-i18next";
import { useSelector } from "react-redux";

import { useFetchLinksQuery } from "../../../apis/backendHttp";
import LinkButton from "./link_button/LinkButton";
import DevToolsButton from "../../../app/components/devtools_button/DevToolsButton";

import "../../../app/locale/i18n";
import "./LinksPage.less";

const kUrl = "openUrl";

export default function LinksPage() {
  const { t } = useTranslation();
  const [selected, setSelected] = useState("all");
  const links = useSelector((state) => state.database?.settings?.links);
  const { refetch } = useFetchLinksQuery(window.hostname);

  useEffect(() => {
    ipcRenderer.on("window", (_event, arg) => {
      if (arg === "show") {
        refetch();
      }
    });
  }, [refetch]);

  return (
    <div className="links">
      <PageHeader
        title={t("tools.links.title")}
        subTitle={t("tools.links.subtitle")}
        extra={[
          links ? (
            <Button
              key="all"
              type={selected === "all" ? "primary" : "default"} // NOSONAR this nesting is clear
              onClick={() => {
                window.scrollTo(0, 0);
                setSelected("all");
              }}
            >
              {t("tools.links.all")}
            </Button>
          ) : null,
          links ? (
            <Button
              key="common"
              type={selected === "common" ? "primary" : "default"} // NOSONAR this nesting is clear
              onClick={() => {
                window.scrollTo(0, 0);
                setSelected("common");
              }}
            >
              {t("tools.links.common")}
            </Button>
          ) : null,
          links
            ? links.map((process) => {
                return process.name !== "NO_PROCESS" ? (
                  <Button
                    key={`${process.id}${process.name}`}
                    type={selected === process.name ? "primary" : "default"} // NOSONAR this nesting is clear
                    onClick={() => {
                      window.scrollTo(0, 0);
                      setSelected(process.name);
                    }}
                  >
                    {process.name}
                  </Button>
                ) : null;
              })
            : null,
        ]}
      >
        {(() => {
          if (links) {
            let sources = [];
            if (selected === "all") {
              links.forEach((process) => {
                sources.push(...process.sources);
              });
            } else if (selected === "common") {
              sources = links.find(
                (process) => process.name === "NO_PROCESS"
              ).sources;
            } else {
              sources = links.find(
                (process) => process.name === selected
              )?.sources;
            }

            return _.uniqBy(sources, (s) => s.id).map((source) => {
              return (
                <LinkButton
                  key={source?.id}
                  title={source?.title}
                  icon={source?.icon}
                  url={source?.href}
                  callback={async () => {
                    await ipcRenderer.invoke(kUrl, {
                      title: source.title,
                      url: source.href,
                      openDefaultBrowser: source.open_with_default_browser,
                      frameless: source.is_frameless,
                    });
                  }}
                />
              );
            });
          }
          return null;
        })()}
      </PageHeader>
      <DevToolsButton route="links" />
    </div>
  );
}