"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";
import SelectField from "@/app/components/select/SelectField";
import Permissions from "@/app/components/permissions/Permissions";

const ViewUserPage = () => {
  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"
            requiredButtons={["back", "title", "edit", "download"]}
          />
          <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 */}
                  <SelectField
                    label="Select Role"
                    options={[
                      { label: "Option", value: "Option" },
                      { label: "Option 1", value: "Option 1" },
                      { label: "Option 2", value: "Option 2" },
                    ]}
                  />
                  {/* 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 */}
              <Permissions sampleData={sampleData} />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ViewUserPage;
