import React from "react";
import Button from "./Button.jsx";
import Modal from "./MatchingModal.jsx";
import Modal2 from "./Modal.jsx";
import SubTitle from "./SubTitle.jsx";

// import styled from "styled-components";

export default function Table({ head, contents, contentKey, onClick, className, view, offset, limit }) {
  const [userName, setUserName] = React.useState("");
  const [modalOpen, setModalOpen] = React.useState(false);
  const openModal = () => {
    setModalOpen(true);
  };

  const [modalOpen2, setModalOpen2] = React.useState(false);
  const openModal2 = () => {
    setModalOpen2(true);
  };

  const closeModal = () => {
    setModalOpen(false);
  };

  const closeModal2 = () => {
    setModalOpen2(false);
  };

  // 보호자 등록페이지 데이터
  const thead3 = [
    "No",
    "이름",
    "생년월일",
    "연락처",
    "대상자와의 관계",
  ];
  const key3 = [
    "No",
    "name",
    "birth",
    "phone",
    "relationship",
  ];
  const content3 = [
    {
      No: 1,
      name: "김훈",
      birth: "1965.01.01",
      relationship: "아들",
      phone: "010-1234-1234",
    },
  ];

  
  const buttonPrint = () => {
    if (view == 'mySenior') {
      return (
        <td>
          <Button
            className={"btn-small gray-btn"}
            btnName={"보기"}
            onClick={openModal}
          />
        </td>)
    }
    else if (view == 'allSenior') {
      return (
        <>
          <td>
            <Button
              className={"btn-small gray-btn"}
              btnName={"선택"}
              onClick={openModal2}
            />
          </td>
          <td>
            <Button
              className={"btn-small gray-btn"}
              btnName={"보기"}
              onClick={openModal}
            />
          </td>
        </>
      )
    }
  }

  return (
    <>
      <Modal open={modalOpen2} close={closeModal2} header="담당자 배정" />
      <Modal2 open={modalOpen} close={closeModal} header={userName+"님의 가족"}>
        <div className="board-wrap">
          <SubTitle explanation={"최초 ID는 연락처, PW는 생년월일 8자리입니다."} className="margin-bottom" />
          <table className="margin-bottom2 senior-insert">
            <tr>
              <th>이름</th>
              <td>
                <input type="text" />
              </td>
              <th>생년월일</th>
              <td>
                <div className="flex">
                  <select name="year" id="year">
                    <option value="">년</option>
                  </select>
                  <select name="month" id="month">
                    <option value="">월</option>
                  </select>
                  <select name="days" id="days">
                    <option value="">일</option>
                  </select>
                </div>
              </td>
            </tr>
            <tr>
              <th>연락처</th>
              <td colSpan={3}>
                <input type="input" maxLength="11" />
              </td>
            </tr>
            <tr>
              <th>대상자와의 관계</th>
              <td colSpan={3}>
                <input type="text" />
              </td>
            </tr>
          </table>
          <div className="btn-wrap flex-center margin-bottom5">
            <Button
              className={"btn-small green-btn"}
              btnName={"추가"}
              onClick={() => {
                navigate("/SeniorInsert");
              }}
            />
          </div>
          <div>
            <Table
              className={"caregiver-user"}
              head={thead3}
              contents={content3}
              contentKey={key3}
            />
          </div>
        </div>
      </Modal2>
      <table className={className}>
        <thead>
          <tr>
            {head.map((i) => {
              return <th>{i}</th>;
            })}
          </tr>
        </thead>
        <tbody>
          {contents.slice(offset, offset + limit).map((i, index) => {
            const name = i.user_name;
            return (
              <tr key={index}>
                {contentKey.map((kes) => {
                  return (
                    <>
                      <td onClick={onClick}>{i[kes]}</td>
                      {console.log("userName : ", userName)}
                    </>
                  )
                })}
                {buttonPrint()}
              </tr>
            );
          })}
        </tbody>
      </table>
    </>
  );
}


// const TableStyled = styled.table`
//   border-top: 2px solid #2d303f;
//   border-bottom: 1px solid #e4dccf;
//   /* &:hover {
//     background-color: #e4dccf;
//   } */
// `;

// const TrStyled = styled.tr`
//   cursor: pointer;
// `;

// const ThStyled = styled.th`
//   padding: 1rem 0;
//   font-weight: bold;
//   background-color: #f0ebe3;
//   font-size: 1.4rem;
//   text-align: center;
// `;

// const TdStyled = styled.td`
//   padding: 1rem 0;
//   border-top: 1px solid #ececec;
//   text-align: center;
//   font-size: 1.3rem;
//   background-color: #ffffff;
// `;