import React, { useState } from "react";
import ContentTitle from "../../component/ContentTitle.jsx";
import SubTitle from "../../component/SubTitle.jsx";
import Modal from "../../component/Modal.jsx";
import Table from "../../component/Table.jsx";
import Button from "../../component/Button.jsx";

function Menu({ className, children, href, title }) {
  if (!children) {
    return <li className="venue-lvl">
      <a href={href ?? '#'}>
        <span>{title}</span>
      </a>
    </li>
  }
  const [open, setOpend] = useState('open');
  // if (className) className = 'group-lvl';
  // className = className ?? 'group-lvl';
  className ??= 'group-lvl';
  className = `${className} sub-nav ${open}`; //[className, 'sub-nav', open].join(' ')
  return <li className={className}>
    <a href={href ?? '#'} onClick={() => setOpend(open ? '' : 'open')} className="max-agency">
      <span>{title}</span><button>관리기관 추가</button>
    </a>
    {open && <ul id="venue-scope-options">
      {children}
    </ul>}
  </li>
}

export default function UserAuthoriySelect() {
  const [agencyName, setAgencyName]= useState("시행기관")
  const [modalOpen, setModalOpen] = React.useState(false);
  const openModal = () => {
    setModalOpen(true);
  };
  const closeModal = () => {
    setModalOpen(false);
  };
  const thead = [
    "No",
    "소속기관명",
    "이름",
    "연락처",
    "성별",
    "주소",
    "담당 대상자(어르신) 인원",
  ];
  const key = [
    "No",
    "center",
    "name",
    "phone",
    "gender",
    "address",
    "worker",
  ];
  const content = [
    {
      No: 1,
      center: "A복지관",
      name: "홍길동",
      phone: "010-1234-1234",
      gender: "여",
      address: "경상북도 군위군 삼국유사면",
      worker: "10명"
    },
   
  ];

  const thead1 = [
    "No",
    "이름",
    "대상자등록번호",
    "생년월일",
    "성별",
    "연락처",
    "주소",
    "보호자",
  ];
  const key1 = ["No",
    "name",
    "management_number",
    "birth",
    "gender",
    "phone",
    "address",
    "family",
  ];
  const content1 = [
    {
      No: 1,
      name: "김복남",
      management_number: 2022080101,
      birth:"1950.02.03",
      gender: "남",
      phone: "010-1234-1234",
      address: "경상북도 군위군 삼국유사면",
      family:(
        <Button
          className={"btn-small gray-btn"}
          btnName={"보호자(가족) 보기"}
          onClick={openModal}
        />
      ),
    },
  ];
  const thead3 = [
    "No",
    "사용자명",
    "사용자ID",
    "대상자와의 관계",
    "보호자 연락처",
  ];
  const key3 = [
    "No",
    "name",
    "Id",
    "relationship",
    "phone",
  ];
  const content3 = [
    {
      No: 1,
      name: "김훈",
      Id: "admin2",
      relationship: "아들",
      phone: "010-1234-1234",
    },
  ];
  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={"senior-table"}
        head={thead}
        contents={content}
        contentKey={key}
        onClick={() => {
          navigate("/SeniorSelectOne");
        }}
      />
      ),
    },
  ]
  const [index, setIndex] = React.useState(1);

  return (
    <main>
      <Modal open={modalOpen} close={closeModal} header="'김복남'님의 가족">
        <div className="board-wrap">
        <div className="btn-wrap flex-end margin-bottom">
              <Button
                className={"btn-small green-btn"}
                btnName={"등록"}
                onClick={() => {
                  navigate("/SeniorInsert");
                }}
              />
              <Button className={"btn-small green-btn"} btnName={"삭제"} />
            </div>
          <div>
            <Table
              className={"caregiver-user"}
              head={thead3}
              contents={content3}
              contentKey={key3}
            />
          </div>
          <div>
            <Button
              className={"btn-100 green-btn"}
              btnName={"닫기"}
              onClick={closeModal}
            />
          </div>
        </div>
      </Modal>
      <div className="content-wrap">
        <ContentTitle contentTitle={"사용자 관리"} />
        <div
          className="flex-align-start"
          style={{ height: "calc(100% - 61px)" }}
        >
          <div className="left flex30" style={{ height: "100%" }}>
            <div style={{ height: "100%" }}>
              <SubTitle
                subtitle={"관리기관 리스트"}
                explanation={"시스템 로그인의 사용자를 관리합니다."}
                className="margin-bottom"
              />
              <div class="hierarchy-menu category">
                <ul>
                  <Menu className="customer-lvl" href="#" title="올잇메디">
                    <li class="group-lvl sub-nav open">
                      <a href="#" className="top-agency">
                        <span>지자체</span><button>시행기관 추가</button>
                      </a>
                      <ul id="venue-scope-options" className="low-agency">
                        <Menu href="#" title={`${agencyName}`} />
                        <Menu href="#" title={`${agencyName}`} />
                        <Menu href="#" title={`${agencyName}`} />

                      </ul>
                    </li>
                    <li class="group-lvl sub-nav open">
                      <a href="#" class="active top-agency">
                        <span>관리 병원</span><button>시행기관 추가</button>
                      </a>
                      <ul className="low-agency">
                        <Menu href="#" title="병원1" />
                        <Menu href="#" title="병원2" />
                        <Menu href="#" title="병원3" />
                      </ul>

                    </li>
                    <li class="venue-lvl ">
                      <a href="#" className="top-agency">
                        <span>관리자</span>
                      </a>
                    </li>
                  </Menu>
                </ul>
              </div>
            </div>
          </div>
          <div className="right flex60" style={{ height: "100%" }}>
            <div style={{ height: "100%" }}>
              <SubTitle
                subtitle={`${agencyName} 사용자 리스트`}
                explanation={"선택된 기관의 사용자 리스트 입니다."}
                className="margin-bottom"
              />
                <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>
                        <option value="이름">이름</option>
                        <option value="아이디">사용자등록번호</option>
                        <option value="아이디">ID</option>
                      </select>
                      <input type="text" />
                      <Button
                        className={"btn-small gray-btn"}
                        btnName={"검색"}
                        onClick={() => navigate("/SeniorInsert")}
                      />
                    </div>
                    <div className="btn-wrap flex-end margin-bottom">
              <Button
                className={"btn-small green-btn"}
                btnName={"등록"}
                onClick={() => {
                  navigate("/SeniorInsert");
                }}
              />
              <Button className={"btn-small green-btn"} btnName={"삭제"} />
            </div>
                    <ul className="tab-content">
                      {data
                        .filter((item) => index === item.id)
                        .map((item) => (
                          <li>{item.description}</li>
                        ))}
                    </ul>
                  </div>
                </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  );
}