import React, { useState } from "react";
import { AdminRolesAndPermissionContainer } from "./index.styled";
import { useNavigate } from "react-router-dom";
import ButtonComponent from "../button";
import photo from "./assets/images/roles_img.png";
import SearchBar from "../searchBar";
import { categoryList } from "./create/data";
import { MdDeleteOutline } from "react-icons/md";
import { PencilIcon } from "./assets/svg/pencil";
import Checkbox from "../checkBoxes/checkbox/index2";
import avatar from "./assets/images/avatar.png";
import PreviewModal from "./modals/preview-modal";
import AssigneesPanel from "./preview-panels/assignees-panel";
import { IoMdAdd } from "react-icons/io";
import useTranslation from "../../hooks/useTranslation.jsx";
import wordStore from "../../mc/wordStore.json";
const AdminRolesAndPermission = () => {
  const { findText } = useTranslation(wordStore);
  const navigate = useNavigate();
  const [deleteModal, setDeleteModal] = useState(false);
  const [deleteAssigneeModal, setDeleteAssigneeModal] = useState(false);
  const [assigneePanel, setAssigneePanel] = useState(false);
  const [emptyRoles, setEmptyRoles] = useState(true);
  const handleChange = (newValue) => {
    setChecked(newValue);
  };
  return (
    <AdminRolesAndPermissionContainer>
      <div className="arp_header">
        <p className="arp_title">{findText("Roles & Permissions")}</p>
        <p className="arp_ref">
          {findText("Settings")}
          <span className="slash">/</span> <span>{findText("Profile")}</span>
        </p>
      </div>

      {emptyRoles && (
        <div className="arp_main">
          <div className="arp_img">
            <img src={photo} alt="" />
          </div>

          <div className="arp_title">{findText("No roles filled yet.")}</div>

          <div className="arp_subtitle">
            {findText("Here's where you can manage all the roles you create.")}
            <br />
            {findText("You can start by creating a new role.")}
          </div>

          <ButtonComponent
            text={findText("Create New Role")}
            styles={{
              width: '203px',
              padding: 10,
              height: 43,
              margin: findText("0 auto"),
            }}
            icon={{
              left: true,
              jsx: IoMdAdd,
            }}
            onClick={(e) => {
              navigate("create");
            }}
          />
        </div>
      )}

      {!emptyRoles && (
        <div className="rll_main_body">
          <div className="rll_main_header">
            <SearchBar
              placeholder={findText("Search here")}
              outlineColor={findText("transparent")}
              heightSize="44px"
              widthSize="100%"
              border="1px solid #ADB2B2"
              // onSubmit={setSearch}
            />

            <ButtonComponent
              text={findText("Create New Role")}
              styles={{
                width: "200px",
                padding: 10,
                height: 43,
              }}
              onClick={(e) => {
                e.preventDefault();
              }}
            />
          </div>

          <div className="rll_role_section">
            <div className="rll_sl_header">
              <div className="rll_sl_one">
                {' '}
                <Checkbox
                  label=""
                  color="#ff9900"
                  defaultValue={false}
                  onChange={handleChange}
                  className="adm_check"
                />
                {findText("Role")}
              </div>
              <div className="rll_no_created">
                {findText("No of Permissions")}
              </div>
              <div className="rll_sl_two">{findText("Assignees")}</div>
              <div className="rll_sl_three">{findText("Action")}</div>
            </div>

            <div className="rll_sl_body">
              {categoryList?.map((item, idx) => (
                <div
                  className="rll_sl_tr"
                  key={idx}
                  onClick={() => navigate('')}
                >
                  <div className="rll_content_title">
                    <div className="rll_img">
                      <Checkbox
                        label=""
                        color="#ff9900"
                        defaultValue={item.selection}
                        onChange={handleChange}
                        className="adm_check"
                      />
                    </div>
                    {item?.name}
                  </div>

                  <div className="rll_nc_users"> {item?.permissions}</div>

                  <div className="rll_nc_assign">
                    <div className="rll_img_group">
                      <div className="rll_img">
                        <img src={avatar} alt="" />
                      </div>
                      <div className="rll_img">
                        <img src={avatar} alt="" />
                      </div>
                      <div className="rll_img">
                        <img src={avatar} alt="" />
                      </div>
                    </div>
                    <span> +24 Others</span>
                  </div>

                  <div className="rll_action">
                    <span className="">
                      <MdDeleteOutline
                        color="#F95454"
                        onClick={() => setDeleteModal(true)}
                      />
                    </span>
                    <span className="">
                      <PencilIcon />
                      Edit
                    </span>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      )}

      <PreviewModal
        isOpen={deleteModal}
        onRequestClose={() => setDeleteModal(false)}
        title={findText("Are you sure you want to delete “Manager” Role?")}
        subTitle={findText("Deleting this role means there...")}
      />
      <PreviewModal
        isOpen={deleteAssigneeModal}
        onRequestClose={() => setDeleteAssigneeModal(false)}
        title={findText("Are you sure you want to remove Saul Hayes?")}
        subTitle={
          <span>
            {findText("Admin will no longer have access to")}
            <br />
            {findText("their account.")}
          </span>
        }
        secondaryButtonText={findText("No")}
        primaryButtonText={findText("Yes, Remove")}
      />

      {assigneePanel && (
        <AssigneesPanel close={() => setAssigneePanel(false)} />
      )}
    </AdminRolesAndPermissionContainer>
  );
};
export default AdminRolesAndPermission;
