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

export default function UserAuthoriySelect() {
  const [modalOpen, setModalOpen] = React.useState(false);
  const openModal = () => {
    setModalOpen(true);
  };
  const closeModal = () => {
    setModalOpen(false);
  };
  const thead1 = [
    "No",
    "사용자관리번호",
    "관리기관",
    "이름",
    "성별",
    "지역",
    "연락처",
    "주소",
  ];
  const key1 = ["No",
  "management_number",
  "level_of_care",
  "name",
  "gender",
  "birth",
  "phone",
  "address",];
  const content1 = [
    {
      No: 1,
      management_number: 2022080101,
      level_of_care: "A복지관",
      name: "김복남",
      gender: "남",
      birth: "대구",
      phone: "010-1234-1234",
      address: "경상북도 군위군 삼국유사면",
    },
  ];

  const thead2 = [
    "No",
    "보호자명",
    "ID",
    "관리기관",
    "해당 대상자",
    "연락처",
  ];
  const key2 = [
    "No",
    "name",
    "Id",
    "management_agency",
    "phone",
    "birth",
    
  ];
  const content2 = [
    {
      No: 1,
      name: "김훈",
      Id: "admin2",
      management_agency: "보호재단",
      phone: "김복남 어르신",
      birth: "010-1234-1234",
    },
  ];
  const thead3 = [
    "No",
    "기관명",
    "사업자번호",
    "ID",
    "담당자",
    "연락처",
    "주소",
  ];
  const key3 = [
    "No",
    "name",
    "birth",
    "Id",
    "management_agency",
    "gender",
    "address",
  ];
  const content3 = [
    {
      No: 1,
      name: "보훈병원",
      birth: " 515-82-00000",
      Id: "admin",
      management_agency: "홍길동",
      gender: "053-818-8181",
      address: "대구광역시 달성군 ",
    },
  ];
  const thead4 = [
    "No",
    "담당자명",
    "소속기관",
    "ID",
    "연락처",
    "주소",
  ];
  const key4 = [
    "No",
    "name",
    "birth",
    "Id",
    "management_agency",
    "address",
  ];
  const content4 = [
    {
      No: 1,
      name: "홍길동",
      birth: " 대구보훈병원",
      Id: "admin",
      management_agency: "053-818-8181",
      address: "대구광역시 달성군 ",
    },
  ];
  
  const thead5 = [
    "No",
    "장비명",
    "시리얼 넘버",
    "기기 상태",
    "구매일",
    "배터리 잔량",
    "대여가능여부",
  ];
  const key5 = ["No",
  "equipment_name",
  "serialNumber",
  "work",
  "name",
  "battery",
  "rental",];
  const content5 = [
    {
      No: 1,
      equipment_name: "스마트약상자",
      serialNumber: "ABCD-1",
      work: "작동",
      name: "2022.12.02",
      battery: "10%",
      rental: "대여가능",
    },
  ];

  const data = [
    {
      id: 1,
      title: "사용자",
      description: (
        <Table
          className={"protector-user"}
          head={thead1}
          contents={content1}
          contentKey={key1}
          onClick={() => {
            navigate("/SeniorSelectOne");
          }}
        />
      ),
    },
    {
      id: 2,
      title: "보호자(가족)",
      description: (
        <Table
          className={"caregiver-user"}
          head={thead2}
          contents={content2}
          contentKey={key2}
          onClick={() => {
            navigate("/SeniorSelectOne");
          }}
        />
      ),
    },
    {
      id: 3,
      title: "계약업체",
      description: (
        <Table
          className={"common-user"}
          head={thead3}
          contents={content3}
          contentKey={key3}
          onClick={() => {
            navigate("/SeniorSelectOne");
          }}
        />
      ),
    },
    {
      id: 4,
      title: "복지사, 간호사",
      description: (
        <Table
          className={"common-user"}
          head={thead3}
          contents={content3}
          contentKey={key3}
          onClick={() => {
            navigate("/SeniorSelectOne");
          }}
        />
      ),
    },
    {
      id: 5,
      title: "관리자",
      description: (
        <Table
          className={"management-user"}
          head={thead4}
          contents={content4}
          contentKey={key4}
          onClick={() => {
            navigate("/SeniorSelectOne");
          }}
        />
      ),
    },
  ];
  const [index, setIndex] = React.useState(1);
  return (
    <main>
      <Modal open={modalOpen} close={closeModal} header="대상자 매칭">
        <div className="board-wrap">
          <div className="flex margin-bottom2">
            <div className="flex50">
              <div className="flex margin-bottom">
                <input
                  type="text"
                  name=""
                  id=""
                  className="flex80"
                  placeholder="사용자 검색"
                />
                <Button btnName={"검색"} className={"flex20"} />
              </div>
              <ul className="user-list2">
                <li>검색 내역이 없습니다.</li>
              </ul>
            </div>
            <div className="flex50">
            <div className="flex margin-bottom">
                <p className="content-title">선택된 대상자</p>
              </div>
              <ul className="user-check-list">
                <div className="flex-start">
                  <input type="text" />
                  <label htmlFor=""></label>
                </div>
              </ul>
            </div>
          </div>
          <div>
            <Button
              className={"btn-100 green-btn"}
              btnName={"등록"}
              onClick={closeModal}
            />
          </div>
        </div>
      </Modal>
      <div className="flex">
        <div className="tab-container">
          <div className="category">
            <ul>올잇메디 <Button
              className={"category-btn"}
              btnName={"관리기관 추가"}
              onClick={closeModal}
            />
              <li>서구청<Button
              className={"category-btn"}
              btnName={"시행기관 추가"}
              onClick={closeModal}
            />
                <ul>
                  <li>A복지관</li>
                  <li>B복지관</li>
                </ul>
              </li>
              <li>보훈병원<Button
              className={"category-btn"}
              btnName={"시행기관 추가"}
              onClick={closeModal}
            /></li>
              <ul>
                <li>
                  대구보훈병원
                </li>
              </ul>
              <li>관리기관<Button
              className={"category-btn"}
              btnName={"시행기관 추가"}
              onClick={closeModal}
            />
                <ul>
                  <li>시행기관1</li>
                  <li>시행기관2</li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
        <div className="tab-container">
          <ul className="tab-menu-mobile">
            <div>
              <SubTitle
                className="margin-bottom"
                subtitle={"사용자 선택"}
                explanation={"사용자 별로 선택 후 관리할 수 있습니다. "}
              />
            </div>
            <select name="" id="" style={{ width: "100%" }}>
              <option value="사용자선택">보호자</option>
              <option value="사용자선택">보호사</option>
              <option value="사용자선택">병원</option>
              <option value="사용자선택">지자체</option>
              <option value="사용자선택">관리자</option>
            </select>
          </ul>
          <ul className="tab-menu">
            {data.map((item) => (
              <li
                key={item.id}
                className={index === item.id ? "active" : null}
                onClick={() => setIndex(item.id)}
              >
                {item.title}
              </li>
            ))}
          </ul>
          <div className="content-wrap">
            <div className="search-management flex-end margin-bottom2">
              <select name="management-agency">
                <option value="기관전체">기관전체</option>
                <option value="대구보훈병원">대구보훈병원</option>
                <option value="군위군청">군위군청</option>
              </select>
              <select>
                <option value="이름">이름</option>
                <option value="아이디">아이디</option>
              </select>
              <input type="text" />
              <Button
                className={"btn-small gray-btn"}
                btnName={"검색"}
                onClick={() => navigate("/SeniorInsert")}
              />
            </div>
            <ul className="tab-content">
              {data
                .filter((item) => index === item.id)
                .map((item) => (
                  <li>{item.description}</li>
                ))}
            </ul>
          </div>
        </div>
      </div >
    </main>
  );
}