import React, { useState, useRef } from "react";
import { PermissionsAccordion, PermissionsContainer } from "./index.styled";
import ButtonComponent from "../../button";
import { permissionsData } from "./data";
import { IoChevronDown } from "react-icons/io5";
import Checkbox from "../../checkBoxes/checkbox/index2";
import { EnglishFlag } from "../assets/svg/englishFlag";
import { CloseRedIcon } from "../assets/svg/close-red";
import { PortugalFlag } from "../assets/svg/portugalFlag";
import { FrenchFlag } from "../assets/svg/frenchFlag";
import { GermanFlag } from "../assets/svg/germanFlag";
import ToggleButtonComponent from "../../toggle button";
import { FaChevronDown } from "react-icons/fa";
import PreviewModal from "../modals/preview-modal";
import useTranslation from "../../../hooks/useTranslation.jsx";
import wordStore from "../../../mc/wordStore.json";
const Permissions = () => {
  const { findText } = useTranslation(wordStore);
  const contentEl = useRef();
  const [active, setActive] = useState(null);
  const [toggleValue, setToggleValue] = useState(false);
  const [addModal, setAddModal] = useState(false);
  const handleToggle = (index) => {
    if (active === index) {
      setActive(null);
    } else {
      setActive(index);
    }
  };
  return (
    <PermissionsContainer>
      <div className="pm_header">
        <p className="pm_title">{findText("Permissions")}</p>
        <ButtonComponent
          text={findText("Save & Add")}
          styles={{
            width: "120px",
            padding: 10,
            height: 40,
          }}
          onClick={(e) => {
            e.preventDefault();
            setAddModal(true);
          }}
        />
      </div>

      <div className="pm_body">
        {permissionsData?.map((item, idx) => (
          <PermissionsAccordion key={idx}>
            <div
              className={`rc-accordion-toggle  ${active === idx ? 'active' : ''}`}
              onClick={() => handleToggle(idx)}
            >
              {item?.title}

              <div className="rc_sl">
                {active === idx && (
                  <span
                    onClick={(e) => {
                      e.stopPropagation();
                    }}
                  >
                    <Checkbox
                      label=""
                      color="#ff9900"
                      defaultValue={false}
                      // onChange={handleChange}
                      className="adm_check"
                    />
                    All Permissions
                  </span>
                )}

                <span className="rc-accordion-icon">
                  <IoChevronDown />
                </span>
              </div>
            </div>

            <div
              ref={contentEl}
              className={`rc-collapse ${active === idx ? "show" : ""}`}
              style={
                active === idx
                  ? {
                      height: "auto",
                    }
                  : {
                      height: "0px",
                    }
              }
            >
              <div className="rc_body_main">
                <div className="rcb_header">
                  Permission to create content in any base language
                  <div className="rc_toggle">
                    <ToggleButtonComponent
                      value={toggleValue}
                      // onClick={() => setToggleValue(!toggleValue)}
                    />
                  </div>
                </div>

                <div className="rcb_body">
                  <div className="rcb_lang_list">
                    <div className="rcb_lang_box">
                      <EnglishFlag /> English US <CloseRedIcon />
                    </div>
                    <div className="rcb_lang_box">
                      <PortugalFlag />
                      Portugese
                      <CloseRedIcon />
                    </div>
                    <div className="rcb_lang_box">
                      <FrenchFlag /> French <CloseRedIcon />
                    </div>
                    <div className="rcb_lang_box">
                      <GermanFlag /> German
                      <CloseRedIcon />
                    </div>
                  </div>

                  <div className="sel_lang_dropdown">
                    Select Language <FaChevronDown />{' '}
                  </div>
                </div>
              </div>
              <div className="rc_body_main">
                <div className="rcb_header">
                  Permission to review versions of a base language’s content -
                  level 1 
                  <div className="rc_toggle">
                    <ToggleButtonComponent />
                  </div>
                </div>

                <div className="rcb_body">
                  <div className="rcb_lang_list">
                    <div className="rcb_lang_box">
                      <EnglishFlag /> English US <CloseRedIcon />
                    </div>
                    <div className="rcb_lang_box">
                      <PortugalFlag />
                      Portugese
                      <CloseRedIcon />
                    </div>
                    <div className="rcb_lang_box">
                      <FrenchFlag /> French <CloseRedIcon />
                    </div>
                    <div className="rcb_lang_box">
                      <GermanFlag /> German
                      <CloseRedIcon />
                    </div>
                  </div>

                  <div className="sel_lang_dropdown">
                    Select Language <FaChevronDown />{' '}
                  </div>
                </div>
              </div>
            </div>
          </PermissionsAccordion>
        ))}
      </div>

      <PreviewModal
        isOpen={addModal}
        onRequestClose={() => setAddModal(false)}
        title={findText(
          "Are you sure you want to add these permissions to this role?"
        )}
        secondaryButtonText={findText("No, Cancel")}
        primaryButtonText={findText("Yes, Add")}
      />
    </PermissionsContainer>
  );
};
export default Permissions;
