import { AlertOutlined, BulbOutlined } from "@ant-design/icons";
import { Button, Layout, Space } from "antd";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { Link } from "react-router-dom";
import { createStructuredSelector } from "reselect";
import WssStatusDisplayComponent from "../../components/wss-status-display/wss-status-display.component.jsx";
import { selectIsPartsEntry } from "../../redux/application/application.selectors.js";
import InstanceRenderManager from "../../utils/instanceRenderMgr.js";

const { Footer } = Layout;

const mapStateToProps = createStructuredSelector({
  isPartsEntry: selectIsPartsEntry
});

export function GlobalFooter({ isPartsEntry }) {
  const { t } = useTranslation();

  if (isPartsEntry) {
    return (
      <Footer>
        <div
          style={{
            display: "flex",
            flexDirection: "column",
            justifyContent: "center",
            alignItems: "center",
            margin: "1rem 0rem"
          }}
        >
          <div>
            {`${InstanceRenderManager({
              imex: t("titles.imexonline"),
              rome: t("titles.romeonline")
            })} - ${import.meta.env.VITE_APP_GIT_SHA_DATE}`}
          </div>
          <Link to="/disclaimer" target="_blank" style={{ color: "#ccc" }}>
            Disclaimer & Notices
          </Link>
        </div>
      </Footer>
    );
  }

  return (
    <Footer>
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
          alignItems: "center",
          margin: "1rem 0rem"
        }}
      >
        <Link to="/manage/feature-request">
          <Button icon={<BulbOutlined />} type="text">
            {t("general.labels.feature-request")}
          </Button>
        </Link>
        <Space>
          <WssStatusDisplayComponent />
          <div>
            {`${InstanceRenderManager({
              imex: t("titles.imexonline"),
              rome: t("titles.romeonline")
            })} - ${import.meta.env.VITE_APP_GIT_SHA_DATE}`}
          </div>
          <Button icon={<AlertOutlined />} data-canny-changelog type="text">
            {t("general.labels.changelog")}
          </Button>
        </Space>
        <Link to="/disclaimer" target="_blank" style={{ color: "#ccc" }}>
          Disclaimer & Notices
        </Link>
      </div>
    </Footer>
  );
}

export default connect(mapStateToProps)(GlobalFooter);
