import React from "react";

import { Layout } from "antd";
import { t } from "i18next";
import { LinkOutlined, ToolOutlined } from "@ant-design/icons";
import { ipcRenderer } from "electron";

import DateTime from "../../features/datetime/DateTimeComponent";
import Programs from "../../features/programs/ProgramsComponent";
import Info from "../../features/info/InfoComponent";
import SupportButton from "../../features/support/SupportButton";
import ToggleButton from "../components/toggle_button/ToggleButton";
import "./CompactLayout.less";

import WorkplaceDisabled from "../../features/workplace_disabled/WorkplaceDisabledComponent";
import Sites from "../../features/tools/sites/Sites";

const { Content } = Layout;
const kToolWindow = "openToolsMenu";

export default function CompactLayout(props) {
  const { isFetchingSettings, settings } = props;
  return (
    <Layout>
      <Content className="app-content--compact">
        <div className="app-content--compact__col1">
          <ToggleButton />
        </div>
        <div className="app-content--compact__col2">
          <Info compact />
          <div className="app-content--compact__middle-row">
            {(() => {
              if (isFetchingSettings)
                return <div className="app-content__fetching-background" />;
              if (settings) {
                if (settings[0]?.workplace?.is_active)
                  return <Programs compact />;
                return <WorkplaceDisabled />;
              }
              return (
                <WorkplaceDisabled
                  message={t("workplaceDisabled.titleCompactOnCreate")}
                />
              );
            })()}
            <Sites />
            <div className="tools--compact">
              <LinkOutlined
                style={{ order: 1000 }}
                onClick={({ screenX }) => {
                  ipcRenderer.invoke(kToolWindow, {
                    route: "links",
                    posX: screenX,
                  });
                }}
              />
              <ToolOutlined
                style={{ order: 1000 }}
                onClick={({ screenX }) => {
                  ipcRenderer.invoke(kToolWindow, {
                    route: "utilities",
                    posX: screenX,
                  });
                }}
              />
            </div>
            <SupportButton />
          </div>
          <DateTime compact />
        </div>
      </Content>
    </Layout>
  );
}