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 = ["보호자", "보호사", "병원", "지자체", "관리자"];
  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-pc">
              <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> */}
            <table>
            <thead>
              <tr>
                <th rowSpan="2">구분</th>
                <th rowSpan="2">사용자 관리</th>
                <th colSpan="3">건강관리</th>
                <th rowSpan="2">방문관리</th>
                <th rowSpan="2">장비관리</th>
                <th rowSpan="2">고객지원센터</th>
                <th rowSpan="2">Q&amp;A</th>
              </tr>
              <tr>
                <th>복약관리</th>
                <th>댁내온도관리</th>
                <th>복약통계</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>시행기관(병원, 복지관 등)</td>
                <td><input type="checkbox" checked="checked"/></td>
                <td><input type="checkbox" checked="checked"/></td>
                <td><input type="checkbox" checked="checked"/></td>
                <td><input type="checkbox" checked="checked"/></td>
                <td><input type="checkbox" /></td>
                <td><input type="checkbox" checked="checked"/></td>
                <td><input type="checkbox" checked="checked"/></td>
                <td><input type="checkbox" checked="checked"/></td>
              </tr>
              <tr>
                <td>보호사(간호사, 복지사 등)</td>
                <td><input type="checkbox" checked="checked"/></td>
                <td><input type="checkbox" checked="checked"/></td>
                <td><input type="checkbox" checked="checked"/></td>
                <td><input type="checkbox" /></td>
                <td><input type="checkbox" checked="checked"/></td>
                <td><input type="checkbox" /></td>
                <td><input type="checkbox" /></td>
                <td><input type="checkbox" /></td>
              </tr>
              <tr>
                <td>보호자(대상자 가족)</td>
                <td><input type="checkbox" checked="checked"/></td>
                <td><input type="checkbox" /></td>
                <td><input type="checkbox" /></td>
                <td><input type="checkbox" /></td>
                <td><input type="checkbox" /></td>
                <td><input type="checkbox" /></td>
                <td><input type="checkbox" /></td>
                <td><input type="checkbox" checked="checked"/></td>
              </tr>
              <tr>
                <td>대상자</td>
                <td><input type="checkbox" checked="checked"/></td>
                <td><input type="checkbox" /></td>
                <td><input type="checkbox" /></td>
                <td><input type="checkbox" /></td>
                <td><input type="checkbox" /></td>
                <td><input type="checkbox" /></td>
                <td><input type="checkbox" /></td>
                <td><input type="checkbox" checked="checked"/></td>
              </tr>             
              
            </tbody>
            </table>
            <div className="btn-wrap flex-end">
              <Button className={"btn-small gray-btn"} btnName={"저장"} />
            </div>
            <SubTitle className="margin-bottom" explanation={"각 메뉴에 대한 설명"} />
            <table className="explain-table">
            <thead>
              <tr>
                <th rowSpan="2">메뉴</th>
                <th rowSpan="2">소메뉴</th>
                <th rowSpan="2">상세설명</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>사용자 관리</td>
                <td>-</td>
                <td>사용자(노인, 보호자 등)를 등록하고 삭제할 수 있다.</td>
              </tr>
              <tr>
                <td rowSpan="3">건강관리</td>
                <td>복약관리</td>
                <td>사용자(노인)의 아침, 점심, 저녁 복약여부를 확인하고 관리할 수 있다.</td>
              </tr>
              <tr>
                <td>댁내온도관리</td>
                <td>사용자(노인)의 아침, 점심, 저녁 댁내온도를 확인하고 관리할 수 있다.</td>
              </tr>
              <tr>
                <td>복약통계</td>
                <td>시행기관에 등록되어 있는 사용자(노인)의 복약 통계 자료를 볼 수 있다.</td>
              </tr>
              <tr>
                <td>방문 관리</td>
                <td>-</td>
                <td>시행기관의 복지사가 사용자(노인)을 방문한 내역을 확인하고 관리할 수 있다.</td>
              </tr>  
              <tr>
                <td>장비 관리</td>
                <td>-</td>
                <td>시행기관에서 관리하고 있는 장비(전체, 미사용, 사용)현황을 관리하고 사용자를 등록할 수 있다.</td>
              </tr>  
              <tr>
                <td>고객지원센터</td>
                <td>-</td>
                <td>장비업체에 교환/반납 요청을 할 수 있다.</td>
              </tr>  
              <tr>
                <td>Q&A</td>
                <td>-</td>
                <td>사용자(노인, 보호자 등)질문을 등록하고 답변할 수 있다.</td>
              </tr>  
              
            </tbody>
            </table>
          </div>
        </div>
      </div>
    </main>
  );
}