"use client";

import React, { useContext, useState } from "react";
import { BottomSheet } from "react-spring-bottom-sheet";
import AppContext from "@ctx/AppContext";
import Buttonbriz from "plugins/Buttonbriz/page";

const BottomSheetChangeRole = (props) => {
  const CTX = useContext(AppContext);

  const [roleSelect, setRoleSelect] = useState(-1);
  const [roleSelectId, setRoleSelectId] = useState(0);

  const roles = CTX.state.profile.roles;

  const handleChangeRole = () => {
    if (roleSelectId != 0) {
      CTX.changeRole(roleSelectId);
    }
    CTX.setBottomSheetChangeRoleOpen(false);
  };

  return (
    <BottomSheet
      open={CTX.state.BottomSheetChangeRoleOpen}
      onDismiss={() => CTX.setBottomSheetChangeRoleOpen(false)}
      blocking={true}
    >
      <div className="text-center py-2 bg-secondary-950  ">
        <p className="mb-0 text-primary-300 relative top-[-5px]">
          انتخاب نقش جدید{" "}
        </p>
      </div>

      <div className="bg-body-100 p-3 ">
        {roles?.map((e, index) => (
          <div
            className={`rounded-xl border-[1px] border-gray-200 p-3 m-2 tr03 ${
              roleSelect == index ? " bg-primary-100" : "bg-gray-100 "
            }`}
            onClick={() => {
              setRoleSelect(index);
              setRoleSelectId(e.id);
            }}
          >
            <p className="mb-0 text-right">{e.roleName}</p>
          </div>
        ))}
        <Buttonbriz
          title="ثبت نقش"
          color="PRIMARY"
          icon="CHECK"
          buttonEvent={() => handleChangeRole()}
        />
      </div>
    </BottomSheet>
  );
};

export default BottomSheetChangeRole;