import React, { useState } from "react";
import { AdminsContainer } from "./index.styled";
import ButtonComponent from "../../button";
import { adminList } from "./data";
import Checkbox from "../../checkBoxes/checkbox/index2";
import avatar from "../assets/images/avatar.png";
import { IoFilterSharp } from "react-icons/io5";
import SearchBar from "../../searchBar";
import PreviewUnassignedPanel from "../preview-panels/unassigned";
import PreviewAdminsPanel from "../preview-panels/admins-panel";
import PreviewModal from "../modals/preview-modal";
import useTranslation from "../../../hooks/useTranslation.jsx";
import wordStore from "../../../mc/wordStore.json";
const Admins = () => {
  const { findText } = useTranslation(wordStore);
  const [open, setOpen] = useState(false);
  const [unassignedPanel, setUnassignedPanel] = useState(false);
  const [adminsPanel, setAdminsPanel] = useState(false);
  const [addModal, setAddModal] = useState(false);
  const handleChange = (newValue) => {
    setChecked(newValue);
  };
  return (
    <AdminsContainer>
      <div className="ad_header">
        <p className="ad_title">{findText("Admins")}</p>
        <ButtonComponent
          text={findText("Save & Add")}
          styles={{
            width: "120px",
            padding: 10,
            height: 40,
          }}
          onClick={(e) => {
            e.preventDefault();
            setAddModal(true);
          }}
        />
      </div>

      <div className="ad_filter_row">
        <SearchBar
          placeholder={findText("Search Admins")}
          outlineColor={findText("transparent")}
          heightSize="44px"
          widthSize="100%"
          border="1px solid #ADB2B2"
          // onSubmit={setSearch}
        />

        <div className="ad_drop_filter">
          <div className="ad_filter_box" onClick={() => setOpen(!open)}>
            <IoFilterSharp />
            {findText("All")}
          </div>

          {open && (
            <div className="ad_filter_body">
              <p className="afb_item">{findText("Manager")}</p>
              <p className="afb_item">{findText("IT")}</p>
              <p className="afb_item">{findText("Security")}</p>
              <p className="afb_item">{findText("CMS")}</p>
              <p className="afb_item">{findText("Unassigned")}</p>
              <p className="afb_item">{findText("Undefined")}</p>
            </div>
          )}
        </div>
      </div>

      <div className="ad_body">
        {adminList?.map((item, idx) => (
          <div className="ad_list_row" key={idx}>
            <div className="adl_box">
              <Checkbox
                label=""
                color="#ff9900"
                defaultValue={item.selection}
                onChange={handleChange}
                className="adm_check"
              />
            </div>

            <div className="adl_wrapper">
              <div className="adl_img">
                <img src={item?.image} alt="" />
              </div>

              <div>
                <p className="adl_title">{item?.name}</p>
                <span
                  className="adl_stat"
                  onClick={() => setUnassignedPanel(true)}
                >
                  {' '}
                  {item?.status}
                </span>
              </div>
            </div>
          </div>
        ))}
      </div>

      {unassignedPanel && (
        <PreviewUnassignedPanel
          close={() => {
            setUnassignedPanel(false);
          }}
        />
      )}

      {adminsPanel && (
        <PreviewAdminsPanel
          close={() => {
            setAdminsPanel(false);
          }}
        />
      )}
      <PreviewModal
        isOpen={addModal}
        onRequestClose={() => setAddModal(false)}
        title={findText("Are you sure you want to add these admins?")}
        secondaryButtonText={findText("No, Cancel")}
        primaryButtonText={findText("Yes, Add")}
      />
    </AdminsContainer>
  );
};
export default Admins;
