"use client";
import React from "react";
import styles from "./styles.module.css";
import { usePathname, useRouter } from "next/navigation";

const TopHeader = (props) => {
  const pathName = usePathname();
  const router = useRouter();
  const handleNavigateToAdd = () => {
    router.push(`${pathName}/add`);
  };
  return (
    <div className={styles.container}>
      <div className={styles.title}>
        <p>{props.topbarTitle}</p>
      </div>
      <div className={styles.actionBar}>
        {!props.state && (
          <div className={styles.searchBarContainer}>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width={24}
              height={24}
              viewBox="0 0 24 24"
              fill="none"
            >
              <path
                d="M19.5527 19.5536L14.7064 14.7074M9.16822 16.7847C13.3741 16.7847 16.7837 13.3751 16.7837 9.1692C16.7837 4.96328 13.3741 1.55371 9.16822 1.55371C4.9623 1.55371 1.55273 4.96328 1.55273 9.1692C1.55273 13.3751 4.9623 16.7847 9.16822 16.7847Z"
                stroke="#858699"
                strokeWidth={1.5}
                strokeLinecap="round"
                strokeLinejoin="round"
              />
            </svg>
          </div>
        )}
        {pathName === "/credentials" ? (
          <div className={styles.mngEnvKeyButton}>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width={20}
              height={20}
              viewBox="0 0 20 20"
              fill="none"
            >
              <path
                d="M10.3723 16.8874C9.70785 17.0716 8.90927 16.7502 8.70885 15.9223C8.65958 15.719 8.563 15.5301 8.42695 15.3712C8.29091 15.2122 8.11925 15.0876 7.92596 15.0075C7.73266 14.9274 7.52319 14.8941 7.31458 14.9103C7.10598 14.9265 6.90414 14.9917 6.7255 15.1006C5.5361 15.8252 4.17404 14.4639 4.89862 13.2737C5.00739 13.0952 5.07249 12.8934 5.08862 12.685C5.10476 12.4765 5.07148 12.2672 4.99149 12.074C4.9115 11.8808 4.78705 11.7093 4.62827 11.5732C4.46949 11.4372 4.28085 11.3406 4.07769 11.2911C2.7241 10.9628 2.7241 9.03723 4.07769 8.70885C4.28103 8.65958 4.46987 8.563 4.62883 8.42695C4.78779 8.29091 4.91239 8.11925 4.99247 7.92596C5.07255 7.73266 5.10586 7.52319 5.08969 7.31458C5.07352 7.10598 5.00832 6.90414 4.8994 6.7255C4.17481 5.5361 5.5361 4.17404 6.72627 4.89862C7.4971 5.36729 8.4961 4.95258 8.70885 4.07769C9.03723 2.7241 10.9628 2.7241 11.2911 4.07769C11.3404 4.28103 11.437 4.46987 11.573 4.62883C11.7091 4.78779 11.8807 4.91239 12.074 4.99247C12.2673 5.07255 12.4768 5.10586 12.6854 5.08969C12.894 5.07352 13.0959 5.00832 13.2745 4.8994C14.4639 4.17481 15.826 5.5361 15.1014 6.72627C14.9926 6.90484 14.9275 7.10655 14.9114 7.31501C14.8952 7.52347 14.9285 7.7328 15.0085 7.92598C15.0885 8.11916 15.2129 8.29074 15.3717 8.42677C15.5305 8.5628 15.7191 8.65945 15.9223 8.70885C16.7548 8.91081 17.0755 9.7171 16.8835 10.3839"
                stroke="#8287FF"
                strokeWidth={1.5}
                strokeLinecap="round"
                strokeLinejoin="round"
              />
              <path
                d="M13.084 15.3955H17.709"
                stroke="#8287FF"
                strokeWidth={1.5}
                strokeLinecap="round"
                strokeLinejoin="round"
              />
              <path
                d="M15.3965 13.083V17.708"
                stroke="#8287FF"
                strokeWidth={1.5}
                strokeLinecap="round"
                strokeLinejoin="round"
              />
              <path
                d="M7.6875 10C7.6875 10.6133 7.93114 11.2015 8.36482 11.6352C8.79849 12.0689 9.38669 12.3125 10 12.3125C10.6133 12.3125 11.2015 12.0689 11.6352 11.6352C12.0689 11.2015 12.3125 10.6133 12.3125 10C12.3125 9.38669 12.0689 8.79849 11.6352 8.36482C11.2015 7.93114 10.6133 7.6875 10 7.6875C9.38669 7.6875 8.79849 7.93114 8.36482 8.36482C7.93114 8.79849 7.6875 9.38669 7.6875 10Z"
                stroke="#8287FF"
                strokeWidth={1.5}
                strokeLinecap="round"
                strokeLinejoin="round"
              />
            </svg>
            <p>Manage Env. Key</p>
          </div>
        ) : (
          ""
        )}
        {!props.state && (
          <div className={styles.button} onClick={handleNavigateToAdd}>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="20"
              height="20"
              viewBox="0 0 20 20"
              fill="none"
            >
              <path
                d="M10 4.41016V15.5907"
                stroke="currentColor"
                strokeOpacity={1}
                strokeWidth={1.5}
                strokeLinecap="round"
                strokeLinejoin="round"
              />
              <path
                d="M4.41016 10H15.5907"
                stroke="currentColor"
                strokeOpacity={1}
                strokeWidth={1.5}
                strokeLinecap="round"
                strokeLinejoin="round"
              />
            </svg>
            <p>{props.buttonText}</p>
          </div>
        )}
        {props.state === "add" ? (
          <>
            <div className={styles.button}>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width={20}
                height={20}
                viewBox="0 0 20 20"
                fill="none"
              >
                <path
                  d="M4.53125 10L8.4375 13.9062L16.25 6.09375"
                  stroke="white"
                  strokeWidth={1.5}
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
              </svg>
              <p>{props.buttonText}</p>
            </div>
            <div className={styles.cancelButton} onClick={() => router.back()}>
              <p>{props.cancelButtonText}</p>
            </div>
          </>
        ) : (
          ""
        )}
      </div>
    </div>
  );
};

export default TopHeader;