Frontend-Internal-Developer-Platform/frontend/src/app/components/topHeader/TopHeader.jsx

"use client";
import React, { useState } from "react";
import styles from "./styles.module.css";
import { usePathname, useRouter, useParams } from "next/navigation";
import BackIcon from "../icons/back";
import SearchIcon from "../icons/search";
import EnviromentIcon from "../icons/env";
import AddIcon from "../icons/add";
import CheckIcon from "../icons/check";
import MenuIcon from "../icons/menu";
import CloneIcon from "../icons/clone";
import RobotIcon from "../icons/robot";
import KeyIcon from "../icons/key";
import ManageEnvIcon from "../icons/manageEnv";
import Alert from "../alerts/Alert";
import DownloadIcon from "../icons/download";
import OutlineDownloadIcon from "../icons/outlineDownload";
import RestartIcon from "../icons/restart";
import PrimaryButton from "../buttons/primarybutton/PrimaryButton";
import EditIcon from "../icons/edit";
import UpdateIcon from "../icons/update";
import SecondaryButton from "../buttons/secondaryButton/SecondaryButton";
import SearchBar from "../searchbar/SearchBar";
import ViewLogsIcon from "../icons/viewLogs";
import PublishIcon from "../icons/publish";
import useIsMobile from "@/app/hooks/useIsMobile";

const TopHeader = (props) => {
  const [triggerDropDownMenu, setTriggerDropDownMenu] = useState(false);
  const [triggerAlert, setTriggerAlert] = useState(false);
  const pathName = usePathname();
  const router = useRouter();
  const [editState, setEditState] = useState(false);
  const params = useParams();
  const handleNavigateToAdd = () => {
    router.push(`${pathName}/add`);
  };
  const isMobile = useIsMobile();
  return (
    <>
      {triggerAlert && (
        <Alert
          setTriggerAlert={setTriggerAlert}
          setEditState={setEditState}
          title={!editState ? props.topbarTitle : "Save Changes"}
          body="You are about to save the changes. Do you want to continue?"
          editState={editState}
        />
      )}
      <div className={styles.container}>
        <div className={styles.title}>
          {props.requiredButtons.includes("back") && (
            <div onClick={() => router.back()}>
              <BackIcon />
            </div>
          )}
          <p>{props.topbarTitle}</p>
        </div>
        <div className={styles.actionBar}>
          {props?.requiredButtons.includes("search") && (
            <div className={styles.searchBarContainer}>
              {!isMobile && <SearchBar />}
            </div>
          )}
          {props?.requiredButtons.includes("env") && (
            <div className={styles.mngEnvKeyButton}>
              <EnviromentIcon />
              {!isMobile && <p>Manage Env. Key</p>}
            </div>
          )}
          {props?.requiredButtons.includes("add-services") && (
            <PrimaryButton
              icon={<AddIcon />}
              text={isMobile ? "" : props.buttonText}
              onClick={() => props?.trigger(!props?.triggerState)}
            />
          )}
          {!editState && props?.requiredButtons.includes("edit") && (
            <PrimaryButton
              icon={<EditIcon />}
              text="Edit"
              onClick={() => {
                setEditState(true);
              }}
            />
          )}
          {props?.requiredButtons.includes("add") && (
            <PrimaryButton
              icon={<AddIcon />}
              text={isMobile ? "" : props?.buttonText}
              onClick={handleNavigateToAdd}
            />
          )}
          {editState || props?.requiredButtons?.includes("save") ? (
            <>
              <PrimaryButton
                text="Save"
                form="form"
                type="submit"
                onClick={() =>
                  editState ? setTriggerAlert(!triggerAlert) : ""
                }
                icon={<CheckIcon width={20} height={20} />}
              />

              <SecondaryButton
                text="Cancel"
                onClick={
                  editState
                    ? () => setEditState(!editState)
                    : () => router.back()
                }
              />
            </>
          ) : null}
          {props?.requiredButtons.includes("update") && (
            <>
              <PrimaryButton
                icon={<UpdateIcon color="white" />}
                text="Update"
              />
              <SecondaryButton text="Cancel" onClick={() => router.back()} />
            </>
          )}
          {props?.requiredButtons?.includes("services-drop-down") && (
            <div
              className={styles.menu}
              onClick={() => setTriggerDropDownMenu(!triggerDropDownMenu)}
            >
              <div className={styles.dotMenu}>
                <MenuIcon />
              </div>
              {triggerDropDownMenu && (
                <div className={styles.dropDown}>
                  <div>
                    <div>
                      <CloneIcon />
                      <p>Clone Project</p>
                    </div>
                  </div>
                  <div>
                    <div>
                      <RobotIcon />
                      <p>Robots</p>
                    </div>
                  </div>
                  <div>
                    <div>
                      <KeyIcon />
                      <p>Init Key</p>
                    </div>
                  </div>
                  <div>
                    <div>
                      <ManageEnvIcon />
                      <p>Manage Env. Key</p>
                    </div>
                  </div>
                </div>
              )}
            </div>
          )}

          {props?.requiredButtons.includes("download") && !editState && (
            <div
              className={styles.menu}
              onClick={() => setTriggerDropDownMenu(!triggerDropDownMenu)}
            >
              <div className={styles.dotMenu}>
                <MenuIcon />
              </div>
              {triggerDropDownMenu && (
                <div className={styles.dropDown}>
                  <div onClick={() => props?.setTriggerLogsModal?.(true)}>
                    <div>
                      <ViewLogsIcon />
                      <p>View Logs</p>
                    </div>
                  </div>
                  <div>
                    <div>
                      <PublishIcon />
                      <p>Publish Service</p>
                    </div>
                  </div>
                  <div>
                    <div>
                      <OutlineDownloadIcon />
                      <p>Download Compose</p>
                    </div>
                  </div>
                  <div>
                    <div>
                      <OutlineDownloadIcon />
                      <p>Download Config</p>
                    </div>
                  </div>
                  <div>
                    <div>
                      <RestartIcon />
                      <p>Restart</p>
                    </div>
                  </div>
                </div>
              )}
            </div>
          )}
        </div>
      </div>
    </>
  );
};

export default TopHeader;