import React from "react";
import Table from "../../component/Table.jsx";
import Button from "../../component/Button.jsx";
import { useNavigate } from "react-router";
import DetailSearch from "../../component/AgencySearch.jsx";
import ContentTitle from "../../component/ContentTitle.jsx";
import SubTitle from "../../component/SubTitle.jsx";
import Modal from "../../component/Modal.jsx";
import person from "../../../resources/files/icon/person.png";

export default function ProtectorSelect() {
  const navigate = useNavigate();
  const [modalOpen, setModalOpen] = React.useState(false);
  const openModal = () => {
    setModalOpen(true);
  };
  const closeModal = () => {
    setModalOpen(false);
  };
  //게시판
  const thead = [
    "No",
    "소속기관명",
    "이름",
    "연락처",
    "ID",
    "담당 대상자(어르신) (명)",
  ];
  const key = [
    "No",
    "center",
    "name",
    "phone",
    "ID",
    "worker",
  ];
  const content = [
    {
      No:(
        <p><span><img src={person} alt="" />{thead[0]}</span> 1</p>
      ),
      center: (
        <p><span>{thead[1]}</span> A복지관</p>
      ),
      name: (
        <p><span>{thead[2]}</span> 홍길동</p>
      ),
      phone: (
        <p><span>{thead[3]}</span> 010-1234-1234</p>
      ),
      ID:  (
        <p><span>{thead[4]}</span> a123</p>
      ),
      worker: (
        <p><span>{thead[5]}</span> 5명</p>
      ),
    },

  ];

  //select option 동적 생성
  // const optionList = () => {
  //   let year = [];
  //   let month = [];
  //   let days = [];
  //   let currentDate = new Date();
  //   let currentYear = currentDate.getFullYear();

  //   for (let i = 1910; i < currentYear.length; i++) {
  //     year.push(i);
  //   }

  //   for (let j = 1; i < 13; j++) {
  //     month.push(j);
  //   }

  //   for (let k = 1; i < 32; k++) {
  //     days.push(k);
  //   }
  //   return year, month, days;
  // };

  // React.useEffect(() => {
  //   optionList();
  // }, []);

  return (
    <main>
      <Modal open={modalOpen} close={closeModal} header="담당자 등록">
        <div className="board-wrap">
          <div>
          <div className="join-inner">
            <div>
            </div>
            <div>
              <div className="flex-start margin-bottom2">
                <label className="flex25" htmlFor="name">
                  기관명
                </label>
                <select name="division" id="section">
                  <option value="manager">기관명</option>
                </select>
              </div>
            </div>
            <div>
              <div className="flex-start margin-bottom2">
                <label className="flex25" htmlFor="name">
                  이름
                </label>
                <input
                  type="text"
                  name="name"
                  placeholder=""
                  autocomplete="off"
                  id="name"
                />
              </div>
            </div>
            <div className="id">
              <div className="flex-start margin-bottom2">
                <label className="flex25" htmlFor="id">
                  아이디
                </label>
                <input
                  type="text"
                  name="id"
                  placeholder=""
                  autocomplete="off"
                  id="id"
                />
                <Button
                  btnName={"중복확인"}
                  className={"red-btn btn-large"}
                  onclick="openIdChk()"
                />
              </div>
            </div>
            <div>
              <div className="flex-start margin-bottom2">
                <label className="flex25" htmlFor="password">
                  비밀번호
                </label>
                <input
                  type="text"
                  name="password"
                  placeholder=""
                  autocomplete="off"
                  id="password"
                />
              </div>
            </div>
            <div>
              <div className="flex-start margin-bottom2">
                <label className="flex25" htmlFor="phone_number">
                  전화번호
                </label>
                <input
                  type="text"
                  name="phone_number"
                  placeholder=""
                  autocomplete="off"
                  id="phone_number"
                />
              </div>
            </div>
            <div className="btn-wrap flex-center">
              <Button className={"gray-btn btn-large"} btnName={"취소"} />
              <Button
                className={"gray-btn btn-large"}
                btnName={"등록"}
                onClick={() => {
                  navigate("Login");
                }}
              />
            </div>
          </div>
          </div>
        </div>
      </Modal>

      <div className="content-wrap">
        <ContentTitle contentTitle={"사용자 조회"} />
        <div>
          <div className="board-wrap">
            <div className="flex margin-bottom">
              <SubTitle className="margin-bottom" explanation={"해당 시행기관의 사용자를 관리할 수 있습니다."} />
                <Button
                  className={"btn-small gray-btn widthbtn"}
                  btnName={"등록"}
                  onClick={openModal}
                  style
                />          
            </div >
            <Table
              className={"senior-table"}
              head={thead}
              contents={content}
              contentKey={key}
              onClick={() => {
                navigate("/SeniorSelectOne");
              }}
            />

          </div>
        </div>
      </div>
    </main>
  );
}