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", "average", "record"];
  const content = [
    {
      No: 1,
      name: "김복남",
      number: "00000001",
      birth: "1948.11.15",
      phone: "010-1234-5678",
      address: "경상북도 군위군 삼국유사면",
      average: (
        <Button
          className={"btn-small gray-btn"}
          btnName={"작성하기"}
          onClick={openModal}
        />
      ),
      record: (
        <Button
          className={"btn-small gray-btn"}
          btnName={"진료 내역"}
          onClick={openModal2}
        />
      ),
    },
    {
      No: 2,
      name: "홍길동",
      number: "00000001",
      birth: "1948.08.02",
      phone: "010-1234-3333",
      address: "경상북도 군위군 군위읍",
      average: (
        <Button
          className={"btn-small gray-btn"}
          btnName={"보기"}
          onClick={openModal}
        />
      ),
      record: (
        <Button
          className={"btn-small gray-btn"}
          btnName={"진료 내역"}
          onClick={openModal2}
        />
      ),
    },
  ];

  const thead1 = [
    "No",
    "진료 일자",
    "진료 사유",
    "진료 내용",
    "심전도 데이터",
    "혈압 데이터",
    "기록 작성자 명",
  ];
  const key1 = ["No", "date", "reason","content", "ecg", "blood", "name"];
  const content1 = [
    {
      No: 1,
      date: "2023-01-25",
      reason: "정기 내원",
      content: "건강검진 진행, 이상 없음",
      ecg: "data",
      blood: "data",
      name: "정간호",
    },
  ];

  return (
    <main>
      <Modal open={modalOpen} close={closeModal} header="문진표 작성">
        <div className="board-wrap">        
          <div>
          <table className="margin-bottom2  questionnaire-table">
            <tr>
              <th>흡연을 하십니까?</th>
              <td className="flex-start">
              <input type="radio" />
                  <label for="gender">예</label>
              <input type="radio" />
                  <label for="gender">아니요</label>
              </td>              
            </tr>
            <tr>
            <th>음주를 하십니까?</th>
              <td className="flex-start">
              <input type="radio" />
                  <label for="gender">예</label>
              <input type="radio" />
                  <label for="gender">아니요</label>
              </td>              
            </tr>
            <tr>
            <th>일주일에 운동을 몇회 하십니까?</th>
              <td className="flex-start">
              <input type="radio" />
                  <label for="gender">안함</label>
              <input type="radio" />
                  <label for="gender">3회 미만</label>
              <input type="radio" />
                  <label for="gender">3회 이상</label>
              <input type="radio" />
                  <label for="gender">매일</label>
              </td>
            </tr>
            <tr>
            <th>최근 3개월 동안 갑작스런 체중 변화가 있었습니까?</th>
              <td className="flex-start">
              <input type="radio" />
                  <label for="gender">예 - 증가</label>
              <input type="radio" />
                  <label for="gender">예 - 감소</label>
              <input type="radio" />
                  <label for="gender">아니요</label>
              </td>   
            </tr>
            <tr>
            <th>현재 복용중인 약이 있으면 체크를 해주세요.</th>
              <td className="flex-start">
              <input type="checkbox" />
                  <label for="gender">없음</label>
              <input type="checkbox" />
                  <label for="gender">아스피린(항혈소판제)</label>
              <input type="checkbox" />
                  <label for="gender">당뇨약</label>
              <input type="checkbox" />
                  <label for="gender">고혈압약</label>
              <input type="checkbox" />
                  <label for="gender">기타</label><input type="text" />
              </td>              
            </tr>
          </table>
          </div>
          <div>
            <Button
              className={"btn-100 green-btn"}
              btnName={"닫기"}
              onClick={closeModal}
            />
          </div>
        </div>
      </Modal>

      <Modal open={modalOpen2} close={closeModal2} 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={thead1}
              contents={content1}
              contentKey={key1}
            />
          </div>
          <div>
            <Button
              className={"btn-100 green-btn"}
              btnName={"닫기"}
              onClick={closeModal2}
            />
          </div>
        </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>
  );
}