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

import DevToolsButton from "../../../app/components/devtools_button/DevToolsButton";
import "./UtilitiesPage.less";
import ProgramButton from "../../programs/program_button/ProgramButton";
import { useLazyFetchWorkplaceQuery } from "../../../apis/backendHttp";
import SettingsPanel from "./settings_panel/SettingsPanel";

export default function LinksPage() {
  const { t } = useTranslation();
  const [selected, setSelected] = useState("all");
  const utilities = useSelector(
    (state) =>
      state.database?.settings?.workplace?.workplace_type?.utility_software
  );
  const [trigger] = useLazyFetchWorkplaceQuery();

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

  return (
    <div className="utilities">
      <PageHeader
        title={t("tools.utilities.title")}
        subTitle={t("tools.utilities.subtitle")}
        extra={[
          <Button
            key="all"
            type={selected === "all" ? "primary" : "default"}
            onClick={() => {
              window.scrollTo(0, 0);
              setSelected("all");
            }}
          >
            {t("tools.utilities.all")}
          </Button>,
          utilities ? (
            <Button
              key="common"
              type={selected === "common" ? "primary" : "default"} // NOSONAR this nesting is clear
              onClick={() => {
                window.scrollTo(0, 0);
                setSelected("common");
              }}
            >
              {t("tools.utilities.common")}
            </Button>
          ) : null,
        ]}
        footer={[<SettingsPanel key="settings" />]}
      >
        {(() => {
          if (utilities) {
            const utils = [];
            utils.push(...utilities);

            return _.uniqBy(utils, (s) => s.id).map((util) => {
              return (
                <ProgramButton key={util.id} type="program" program={util}>
                  {util.label || util.name}
                </ProgramButton>
              );
            });
          }
          return null;
        })()}
      </PageHeader>
      <DevToolsButton route="utilities" />
    </div>
  );
}