"use client";
import TopHeader from "@/app/components/topHeader/TopHeader";
import globalStyle from "../../globalStyle.module.css";
import editUserStyle from "./styles.module.css";
import Prompts from "@/app/components/prompts/Prompts";
import { useState } from "react";
import TextField from "@/app/components/fields/textfield";

const Page = () => {
  const sampleData = [
    { permission: "organization.delete" },
    { permission: "user.create" },
    { permission: "user.list" },
    { permission: "user.update" },
    // { permission: "robot.create" },
    // { permission: "user.delete" },
    // { permission: "robot.list" },
    // { permission: "robot.delete" },
    // { permission: "project.delete" },
    // { permission: "project.update" },
    // { permission: "service.create" },
    // { permission: "service.list" },
    // { permission: "service.delete" },
    // { permission: "service.update" },
  ];

  return (
    <div className={globalStyle.section}>
      <div className={globalStyle.mainContainer}>
        <div className={globalStyle.container}>
          <TopHeader buttonText="" topbarTitle="View" state="view" />
          <div className={editUserStyle.addUserContainer}>
            {/* Input fields Container  */}
            <div className={editUserStyle.inputFieldContainer}>
              {/* User Details */}
              <div className={editUserStyle.userDetails}>
                {/* Header */}
                <div className={editUserStyle.header}>
                  <div>
                    <p>User Details</p>
                  </div>
                </div>
                {/* Input fields */}
                <form className={editUserStyle.fields}>
                  {/* Role and Dropdown */}
                  <div className={editUserStyle.selectRoleContainer}>
                    <div className={editUserStyle.inputContainer}>
                      <div className={editUserStyle.label}>
                        <p>Role</p>
                        {/* <p className={editUserStyle.required}>*</p> */}
                      </div>
                      <div className={editUserStyle.inputField}>
                        <select
                          name="role"
                          className={editUserStyle.selectField}
                        >
                          <option value="">Select Role</option>
                          <option value="">Option</option>
                          <option value="">Option 2</option>
                          <option value="">Option 3</option>
                        </select>
                      </div>
                    </div>
                  </div>
                  {/* Email */}
                  <div className={editUserStyle.inputMainContainer}>
                    <div className={editUserStyle.inputContainer}>
                      {/* Label */}
                      <div className={editUserStyle.label}>
                        <p>Email</p>
                        {/* <p className={editUserStyle.optionalTxt}>(Optional)</p> */}
                      </div>
                      {/* Input field */}
                      <div className={editUserStyle.inputField}>
                        <TextField
                          placeHolder="nino.moonshot@gmail.com" //static
                        />
                      </div>
                      <Prompts show={false} />
                    </div>
                  </div>
                  {/* Full Name */}
                  <div className={editUserStyle.inputMainContainer}>
                    <div className={editUserStyle.inputContainer}>
                      {/* Label */}
                      <div className={editUserStyle.label}>
                        <p>Full Name</p>
                        {/* <p className={editUserStyle.optionalTxt}>(Optional)</p> */}
                      </div>
                      {/* Input field */}
                      <div className={editUserStyle.inputField}>
                        <TextField
                          placeHolder="Nino Paul Cervantes" //static
                        />
                      </div>
                      <Prompts show={false} />
                    </div>
                  </div>
                </form>
              </div>

              {/* Permissions */}
              <div className={editUserStyle.userPermissions}>
                {/* Add permissions */}
                <div className={editUserStyle.permissionsContainer}>
                  {/* Header */}
                  <div className={editUserStyle.permissionsHeader}>
                    <p>Permissions</p>
                    <div className={editUserStyle.svgContainer}>
                      <div>
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          width={24}
                          height={24}
                          viewBox="0 0 24 24"
                          fill="none"
                        >
                          <path
                            d="M12 5.29199V18.7087"
                            stroke="#333649"
                            strokeWidth={2}
                            strokeLinecap="round"
                            strokeLinejoin="round"
                          />
                          <path
                            d="M5.29102 12H18.7077"
                            stroke="#333649"
                            strokeWidth={2}
                            strokeLinecap="round"
                            strokeLinejoin="round"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>

                  {/* State text (static) */}
                  {sampleData.map((perm, index) => {
                    return (
                      <div className={editUserStyle.permissions} key={index}>
                        <div className={editUserStyle.permissionsItem}>
                          <svg
                            xmlns="http://www.w3.org/2000/svg"
                            width={24}
                            height={24}
                            viewBox="0 0 24 24"
                            fill="none"
                          >
                            <path
                              d="M13.834 3.75V7.41667C13.834 7.65978 13.9306 7.89294 14.1025 8.06485C14.2744 8.23676 14.5075 8.33333 14.7507 8.33333H18.4173"
                              stroke="#969AF9"
                              strokeLinecap="round"
                              strokeLinejoin="round"
                            />
                            <path
                              d="M16.584 20.25H7.41732C6.93109 20.25 6.46477 20.0568 6.12096 19.713C5.77714 19.3692 5.58398 18.9029 5.58398 18.4167V5.58333C5.58398 5.0971 5.77714 4.63079 6.12096 4.28697C6.46477 3.94315 6.93109 3.75 7.41732 3.75H13.834L18.4173 8.33333V18.4167C18.4173 18.9029 18.2242 19.3692 17.8803 19.713C17.5365 20.0568 17.0702 20.25 16.584 20.25Z"
                              stroke="#969AF9"
                              strokeLinecap="round"
                              strokeLinejoin="round"
                            />
                            <path
                              d="M9.25 14.7503L11.0833 16.5837L14.75 12.917"
                              stroke="#969AF9"
                              strokeLinecap="round"
                              strokeLinejoin="round"
                            />
                          </svg>
                          <p>{perm.permission}</p>
                        </div>

                        <div className={editUserStyle.deleteBtn}>
                          <div className={editUserStyle.deleteSvg}>
                            {" "}
                            <svg
                              xmlns="http://www.w3.org/2000/svg"
                              width={20}
                              height={20}
                              viewBox="0 0 20 20"
                              fill="none"
                            >
                              <path
                                d="M3.61133 6.00684H16.3891"
                                stroke="currentColor"
                                strokeLinecap="round"
                                strokeLinejoin="round"
                              />
                              <path
                                d="M8.40234 9.20117V13.9928"
                                stroke="currentColor"
                                strokeLinecap="round"
                                strokeLinejoin="round"
                              />
                              <path
                                d="M11.5977 9.20117V13.9928"
                                stroke="currentColor"
                                strokeLinecap="round"
                                strokeLinejoin="round"
                              />
                              <path
                                d="M4.41016 6.00684L5.20877 15.5902C5.20877 16.0138 5.37705 16.42 5.67658 16.7196C5.97612 17.0191 6.38238 17.1874 6.80599 17.1874H13.1949C13.6185 17.1874 14.0247 17.0191 14.3243 16.7196C14.6238 16.42 14.7921 16.0138 14.7921 15.5902L15.5907 6.00684"
                                stroke="currentColor"
                                strokeLinecap="round"
                                strokeLinejoin="round"
                              />
                              <path
                                d="M7.60352 6.00694V3.61111C7.60352 3.39931 7.68765 3.19618 7.83742 3.04641C7.98719 2.89664 8.19032 2.8125 8.40213 2.8125H11.5966C11.8084 2.8125 12.0115 2.89664 12.1613 3.04641C12.311 3.19618 12.3952 3.39931 12.3952 3.61111V6.00694"
                                stroke="currentColor"
                                strokeLinecap="round"
                                strokeLinejoin="round"
                              />
                            </svg>
                          </div>
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Page;