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

export default function Modal({ children, open, close, header }) {

  //-------- 페이징 작업 설정 시작 --------//
  const limit = 10; // 페이지당 보여줄 공지 개수
  const [page, setPage] = React.useState(1); //page index
  const offset = (page - 1) * limit; //게시물 위치 계산
  const [agencyTotal, setAgencyTotal] = React.useState(0); //최대길이 넣을 변수
  //-------- 페이징 작업 설정 끝 --------//

  const thead4 = [
    "No",
    "보호사 명",
    "보호사 ID",
    "보호사 연락처",
    "매칭 일자",
  ];
  const key4 = [
    "No",
    "name",
    "Id",
    "phone",
    "date",
  ];
  const content4 = [
    {
      No: 1,
      name: "정복지",
      Id: "worker5",
      phone: "010-9876-5432",
      date: "2023-01-10",
    },
    {
      No: 2,
      name: "문간호",
      Id: "worker13",
      phone: "010-1357-2468",
      date: "2023-02-07",
    },
  ];

  return (
    <div class={open ? "openModal modal" : "modal"}>
      {open ? (
        <div className="modal-inner">
          <div className="modal-header flex">
            {header}
            <Button className={"close"} onClick={close} btnName={"X"} />
          </div>
          <div className="modal-main">{children}
            <div className="board-wrap">
              <SubTitle explanation={"담당자 선택"} className="margin-bottom" />
              <div className="flex-start protectorlist margin-bottom5">
                <input type="text" list="protectorlist" />
                <datalist id="protectorlist">
                  <option value="보호사1(ID)"></option>
                  <option value="보호사2(ID)"></option>
                  <option value="보호사3(ID)"></option>
                </datalist>
                <div className="btn-wrap">
                  <Button
                    className={"btn-small green-btn"}
                    btnName={"등록"}
                  />
                </div>
              </div>
            </div>
            <div>
              <Table
                className={"caregiver-user"}
                head={thead4}
                contents={content4}
                contentKey={key4}
                view={"matching"}
                offset={offset}
                limit={limit}
              />
            </div>
            <div>
              <Pagination total={content4.length} limit={limit} page={page} setPage={setPage} />
            </div>
          </div>
        </div>

      ) : null}
    </div>
  );
}