import React from "react";
import { useNavigate } from "react-router";
import DetailSearch from "../../component/DetailSearch.jsx";
import Table from "../../component/Table.jsx";
import ContentTitle from "../../component/ContentTitle.jsx";
import SubTitle from "../../component/SubTitle.jsx";
import Button from "../../component/Button.jsx";
import Modal from "../../component/Modal.jsx";

export default function Questionnaire() {
  const navigate = useNavigate();
  const [modalOpen, setModalOpen] = React.useState(false);
  const openModal = () => {
    setModalOpen(true);
  };
  const closeModal = () => {
    setModalOpen(false);
  };

  const [modalOpen2, setModalOpen2] = React.useState(false);
  const openModal2 = () => {
    setModalOpen2(true);
  };
  const closeModal2 = () => {
    setModalOpen2(false);
  };
  //게시판
  const thead = ["No", "이름","대상자등록번호", "생년월일", "연락처", "주소", "최근등록일", "최고혈압",  "최저혈압", "맥박수","혈압측정",];
  const key = ["No", "name","number", "birth", "phone", "address","recent", "high","low","pulse", "average", ];
  const content = [
    {
      No: 1,
      name: "김복남",
      number: "00000001",
      birth: "1948.11.15",
      phone: "010-1234-5678",
      address: "경상북도 군위군 삼국유사면",
      recent:"2020-01-05",
      high:"130",
      low:"90",
      pulse:"60",
      average: (
        <Button
          className={"btn-small gray-btn"}
          btnName={"등록"}
          onClick={openModal}
        />
      ),
    },
  ];

  const thead1 = [
    "No",
    "측정 일자",
    "최고 혈압",
    "최저 혈압",
    "맥박수",
    "작성자",
  ];
  const key1 = ["No", "date", "high","low", "pulse", "writer"];
  const content1 = [
    {
      No: 1,
      date: "2023-01-25",
      high: "130",
      low: "90",
      pulse: "60",
      writer: "정간호",
    },
  ];

  return (
    <main>
      <Modal open={modalOpen} close={closeModal} header="혈압측정 등록">
        <div className="board-wrap">        
          <div>
          <table className="margin-bottom2">
            <tr>
              <th>대상자명</th>
              <td className="flex-start">
                <input type="text" placeholder="자동입력"/>
              </td>              
            </tr>
            <tr>
              <th>측정일자</th>
              <td className="flex-start">
                <input type="text" placeholder="자동입력"/>
              </td>              
            </tr>
            <tr>
              <th>최고혈압</th>
              <td className="flex-start">
                <input type="text" />
              </td>              
            </tr>
            <tr>
              <th>최저혈압</th>
              <td className="flex-start">
                <input type="text" />
              </td>              
            </tr>
            <tr>
              <th>맥박수</th>
              <td className="flex-start">
                <input type="text" />
              </td>              
            </tr>
            
          </table>
          <div className="btn-wrap flex-center margin-bottom5">
          <Button className={"btn-small green-btn"} btnName={"저장"} />
            </div>
          </div>
          <Table
              className={"caregiver-user "}
              head={thead1}
              contents={content1}
              contentKey={key1}
            />
        </div>
      </Modal>

      <div className="content-wrap">
      <ContentTitle contentTitle={"혈압 관리"} />
        <div>
          <DetailSearch />
          <div className="board-wrap">
            <Table
            className={"medicine-table"}
              head={thead}
              contents={content}
              contentKey={key}
            />
          </div>
        </div>
      </div>
    </main>
  );
}