"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";

const TopHeader = (props) => {
  const [triggerDropDownMenu, setTriggerDropDownMenu] = useState(false);
  const [triggerAlert, setTriggerAlert] = useState(false);
  const pathName = usePathname();
  const router = useRouter();
  const params = useParams();
  const handleNavigateToAdd = () => {
    router.push(`${pathName}/add`);
  };
  return (
    <>
      {triggerAlert && <Alert setTriggerAlert={setTriggerAlert} />}
      <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}>
              <SearchIcon />
            </div>
          )}
          {props.requiredButtons.includes("env") && (
            <div className={styles.mngEnvKeyButton}>
              <EnviromentIcon />
              <p>Manage Env. Key</p>
            </div>
          )}
          {props.requiredButtons.includes("add-services") && (
            <PrimaryButton
              icon={<AddIcon />}
              text={props.buttonText}
              onClick={() => props.trigger(!props.triggerState)}
            />
          )}
          {props.requiredButtons.includes("edit") && (
            <PrimaryButton
              icon={<EditIcon />}
              text="Edit"
              onClick={() => props.trigger(!props.triggerState)}
            />
          )}
          {props.requiredButtons.includes("add") && (
            <PrimaryButton
              icon={<AddIcon />}
              text={props.buttonText}
              onClick={handleNavigateToAdd}
            />
          )}
          {props.requiredButtons.includes("save") && (
            <>
              <div
                className={styles.button}
                onClick={() => setTriggerAlert(!triggerAlert)}
              >
                <CheckIcon width={20} height={20} />
                <p>{props.buttonText}</p>
              </div>
              <div
                className={styles.cancelButton}
                onClick={() => router.back()}
              >
                <p>{props.cancelButtonText}</p>
              </div>
            </>
          )}
          {props.requiredButtons.includes("update") && (
            <>
              <PrimaryButton
                icon={<UpdateIcon color="white" />}
                text="Update"
              />
              <div
                className={styles.cancelButton}
                onClick={() => router.back()}
              >
                <p>{props.cancelButtonText}</p>
              </div>
            </>
          )}
          {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") && (
            <div
              className={styles.menu}
              onClick={() => setTriggerDropDownMenu(!triggerDropDownMenu)}
            >
              <div className={styles.dotMenu}>
                <MenuIcon />
              </div>
              {triggerDropDownMenu && (
                <div className={styles.dropDown}>
                  <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;