import React from "react";
import ContentTitle from "../../component/ContentTitle.jsx";
import SubTitle from "../../component/SubTitle.jsx";
import Button from "../../component/Button.jsx";

export default function AuthorityManagement() {
  const [checkArr, setCheckArr] = React.useState([]); //check 배열
  const [menuCheckArr, setMenuCheckArr] = React.useState([]); //menu check 배열

  const authorityList = ["보호자", state.loginUser['title_name'], "병원", "지자체", "관리자"];
  const menuList = [
    {
      menu: {
        대상자관리: ["대상자관리"],
        생활복지관리: ["복약관리", "댁내온도관리", "복약통계"],
        방문전화관리: ["방문/전화 관리"],
        장비관리: ["장비관리"],
        설정: ["내정보 관리", "사용자 관리", "권한 관리"],
      },
    },
  ];

  const onCheckedElement = (checked, title) => {
    if (checked) {
      setMenuCheckArr([...menuCheckArr]);
      setCheckArr([...checkArr, title]);
    } else if (!checked) {
      setCheckArr(checkArr.filter((el) => el !== title));
    }
  };
  return (
    <main>
      <div className="content-wrap">
        <ContentTitle contentTitle={"권한관리"} />
        <div className="board-wrap">
          <SubTitle className="margin-bottom" explanation={"메뉴 권한을 설정할 수 있습니다."} />
          <div className="board-wrap">
            <table className="authority-table">
              <thead>
                <tr>
                  <th colSpan={2} style={{ width: "30%" }}>
                    메뉴 목록
                  </th>
                  <th style={{ width: "70%" }}>운영자 목록</th>
                </tr>
                <tr>
                  <th>대메뉴</th>
                  <th>소메뉴</th>
                  <th style={{ backgroundColor: "transparent" }}>
                    <div className="flex">
                      {authorityList.map((i) => (
                        <div className="flex-start">
                          <input
                            className="flex10"
                            type="checkbox"
                            value={i}
                            onChange={(e) => {
                              onCheckedElement(
                                e.target.checked,
                                e.target.value
                              );
                            }}
                          />
                          <label className="flex90">{i}</label>
                        </div>
                      ))}
                    </div>
                  </th>
                </tr>
              </thead>
              <tbody>
                {menuList.map((i, idx) =>
                  Object.entries(i.menu).map(([key, value]) =>
                    value.map((item, index) => (
                      <tr key={idx}>
                        {index === 0 && (
                          <td rowSpan={value.length}>
                            <div className="flex-center">
                              <input
                                type="checkbox"
                                id="largeMenu"
                                className="flex10"
                              />
                              <label htmlFor="largeMenu" className="flex60">
                                {key}
                              </label>
                            </div>
                          </td>
                        )}
                        <td>
                          <div className="flex-center">
                            <input
                              type="checkbox"
                              id="smallMenu"
                              className="flex10"
                            />
                            <label htmlFor="smallMenu" className="flex60">
                              {item}
                            </label>
                          </div>
                        </td>
                        <td>
                          {checkArr.map((managerList, managerIdx) => (
                            <button style={{marginRight:"1rem"}} key={managerIdx}>{managerList}</button>
                          ))}
                        </td>
                      </tr>
                    ))
                  )
                )}
              </tbody>
            </table>
            <div className="btn-wrap flex-end">
              <Button className={"btn-small green-btn"} btnName={"저장"} />
            </div>
          </div>
        </div>
      </div>
    </main>
  );
}