"use client";

import AppContext from "@ctx/AppContext";
import React, { useContext, useEffect, useState } from "react";

const page = ({ title, detail, value }) => {
  const CTX = useContext(AppContext);
  const permissionsChoose = CTX.state.permissionsChoose;
  const roleData = CTX.state.roleData;

  const [isChecked, setIsChecked] = useState(false);

  const handlePermissionsChoose = (e) => {
    setIsChecked(e.target.checked);
    if (e.target.checked) {
      CTX.setPermissionsChoose((current) => [...current, value]);
    } else {
      CTX.setPermissionsChoose(permissionsChoose.filter((el) => el !== value));
    }
  };

  useEffect(() => {
    if (!!permissionsChoose?.find((e) => e == value)) {
      setIsChecked(true);
    }
  }, [permissionsChoose]);

  return (
    <div className="flex rtl mt-4">
      <div>
        <input
          type="checkbox"
          className="w-[40px] h-[40px] !rounded-xl mx-2 custom-checkbox mt-1"
          checked={isChecked ? true : false}
          defaultValue={isChecked}
          name="hasSchengenRelative"
          //   onClick={checkBoxEvent}
          onChange={(e) => handlePermissionsChoose(e)}
        />
      </div>

      <div>
        <h2 className="font-bold text-textMain-100">{title}</h2>
        <p className="mb-0 text-textMain-100 text-right text-sm">{detail} </p>
      </div>
    </div>
  );
};

export default page;