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

const TopHeader = (props) => {
  const [triggerDropDownMenu, setTriggerDropDownMenu] = useState(false);
  const pathName = usePathname();
  const router = useRouter();
  const params = useParams();
  const handleNavigateToAdd = () => {
    router.push(`${pathName}/add`);
  };
  return (
    <div className={styles.container}>
      <div className={styles.title}>
        {((pathName.includes("/view") && props.state === "view") ||
          params.usersId ||
          params.roleId) && (
          <div onClick={() => router.back()}>
            <BackIcon />
          </div>
        )}
        <p>{props.topbarTitle}</p>
      </div>
      <div className={styles.actionBar}>
        {(pathName === "/projects/view" || !props.state) && (
          <div className={styles.searchBarContainer}>
            <SearchIcon />
          </div>
        )}
        {pathName === "/credentials" ? (
          <div className={styles.mngEnvKeyButton}>
            <EnviromentIcon />
            <p>Manage Env. Key</p>
          </div>
        ) : (
          ""
        )}
        {pathName === "/projects/view" && (
          <div
            className={styles.button}
            onClick={() => props.trigger(!props.triggerState)}
          >
            <AddIcon />
            <p>{props.buttonText}</p>
          </div>
        )}
        {!props.state && (
          <div className={styles.button} onClick={handleNavigateToAdd}>
            <AddIcon />
            <p>{props.buttonText}</p>
          </div>
        )}
        {props.state === "add" ? (
          <>
            <div className={styles.button}>
              <CheckIcon width={20} height={20} />
              <p>{props.buttonText}</p>
            </div>
            <div className={styles.cancelButton} onClick={() => router.back()}>
              <p>{props.cancelButtonText}</p>
            </div>
          </>
        ) : (
          ""
        )}
        {/* Projects 3 dots menu */}
        {pathName === "/projects/view" && (
          <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>
        )}
      </div>
    </div>
  );
};

export default TopHeader;