"use client";
import React from "react";
import styles from "./styles.module.css";
import { useRouter, usePathname } from "next/navigation";
import CloseIcon from "@/app/components/icons/close";

const AddServicesModal = (props) => {
  const router = useRouter();
  const pathName = usePathname();
  const servicesList = [
    {
      title: "Start from Scratch",
      linkTo: "add-from-scratch",
      detail:
        "Create a new service manually by configuring all the settings yourself",
      icon: (
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="32"
          height="32"
          viewBox="0 0 32 32"
          fill="none"
        >
          <path
            d="M9.61111 10.8885L4.5 15.9996L9.61111 21.1107M22.3889 10.8885L27.5 15.9996L22.3889 21.1107M18.5556 5.77734L13.4444 26.2218"
            stroke="white"
            strokeOpacity="1"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
          />
        </svg>
      ),
      isReleased: true,
    },
    {
      title: "Choose Gitea Repository",
      detail: "Choose a repository from your linked Gitea Account",
      icon: (
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="32"
          height="32"
          viewBox="0 0 32 32"
          fill="none"
        >
          <path
            d="M4.5 18.5556C5.56056 19.3759 7.15394 19.8551 8.97222 19.8333C10.7905 19.8551 12.3839 19.3759 13.4444 18.5556C14.505 17.7352 16.0984 17.2561 17.9167 17.2778C19.7349 17.2561 21.3283 17.7352 22.3889 18.5556M10.8889 4.5C10.4845 4.79027 10.1568 5.17463 9.9342 5.61988C9.71157 6.06512 9.60069 6.55787 9.61111 7.05556C9.60069 7.55324 9.71157 8.04599 9.9342 8.49124C10.1568 8.93648 10.4845 9.32084 10.8889 9.61111M16 4.5C15.5956 4.79027 15.2679 5.17463 15.0453 5.61988C14.8227 6.06512 14.7118 6.55787 14.7222 7.05556C14.7118 7.55324 14.8227 8.04599 15.0453 8.49124C15.2679 8.93648 15.5956 9.32084 16 9.61111M22.0643 22.0388C22.635 22.3007 23.2613 22.4185 23.8881 22.3818C24.5149 22.345 25.1231 22.1548 25.6592 21.8279C26.1953 21.501 26.6429 21.0474 26.9627 20.507C27.2825 19.9666 27.4646 19.356 27.493 18.7287C27.5215 18.1015 27.3954 17.4768 27.1259 16.9097C26.8564 16.3425 26.4517 15.8503 25.9474 15.4762C25.4431 15.1021 24.8546 14.8577 24.2336 14.7643C23.6127 14.6709 22.9784 14.7315 22.3863 14.9407M4.5 13.4444H22.3889V19.8333C22.3889 21.8667 21.5812 23.8167 20.1434 25.2545C18.7056 26.6923 16.7555 27.5 14.7222 27.5H12.1667C10.1333 27.5 8.18329 26.6923 6.74551 25.2545C5.30774 23.8167 4.5 21.8667 4.5 19.8333V13.4444Z"
            stroke="white"
            strokeOpacity="1"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
          />
        </svg>
      ),
      isReleased: true,
    },
    {
      title: "Link GitHub Repository",
      detail: "Import and deploy a service from your GitHub repository",
      icon: (
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="32"
          height="32"
          viewBox="0 0 32 32"
          fill="none"
        >
          <path
            d="M12.1667 24.9448C6.67222 26.7337 6.67222 21.7503 4.5 21.1115M19.8333 27.5003V23.0281C19.8333 21.7503 19.9611 21.2392 19.1944 20.4726C22.7722 20.0892 26.2222 18.6837 26.2222 12.8059C26.2207 11.2789 25.6249 9.81246 24.5611 8.71701C25.06 7.39063 25.0141 5.92076 24.4333 4.62812C24.4333 4.62812 23.0278 4.24479 19.9611 6.28923C17.3637 5.61276 14.6363 5.61276 12.0389 6.28923C8.97222 4.24479 7.56667 4.62812 7.56667 4.62812C6.98589 5.92076 6.93996 7.39063 7.43889 8.71701C6.37508 9.81246 5.77933 11.2789 5.77778 12.8059C5.77778 18.6837 9.22778 20.0892 12.8056 20.4726C12.0389 21.2392 12.0389 22.0059 12.1667 23.0281V27.5003"
            stroke="white"
            strokeOpacity="1"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
          />
        </svg>
      ),
      isReleased: false,
    },
  ];

  return (
    <div className={styles.container}>
      <div className={styles.modal}>
        <div className={styles.header}>
          <div>
            <p>Create New Services</p>
            <div>
              <p>Choose how you want to create your service</p>
            </div>
          </div>

          <CloseIcon onClick={() => props.trigger(!props.triggerState)} />
        </div>
        <div className={styles.content}>
          {servicesList.map((service, key) => {
            return (
              <div
                className={`${styles.list} ${service.isReleased ? styles.isReleased : styles.isComingSoon}`}
                key={key}
                onClick={() => router.push(`${pathName}/${service.linkTo}`)}
              >
                <div>
                  <div className={styles.iconContainer}>{service.icon}</div>
                  <div className={styles.listDetails}>
                    <div>
                      <p>{service.title}</p>
                      {!service.isReleased && (
                        <div>
                          <p>Coming soon</p>
                        </div>
                      )}
                    </div>
                    <p>{service.detail}</p>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};

export default AddServicesModal;