import React from "react";
import Button from "./Button.jsx";
import Modal_Matching from "./Modal_Matching.jsx";
import Modal_Guadian from "./Modal_Guadian.jsx";
import { useNavigate } from "react-router";
import { Link } from 'react-router-dom';
// import styled from "styled-components";

export default function Table({ head, contents, contentKey, onClick, className, view, offset, limit }) {
  const navigate = useNavigate();
  // 모달 title에 대상자 명 출력을 위함
  const [useName, setUseUserName] = React.useState("");
  // 매칭을 위해 대상자 ID 값 전달을 위함
  const [useseniorId, setUseSeniorId] = 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 buttonPrint = (name, id) => {
    if (view == 'mySenior') {
      return (
        <td>
          <Button
            className={"btn-small gray-btn"}
            btnName={"보기"}
            onClick={() =>{
              setUseUserName(name);
              setUseSeniorId(id);
              openModal();
              }}
          />
        </td>)
    }
    else if (view == 'allSenior') {
      return (
        <>
          <td>
            <Button
              className={"btn-small gray-btn"}
              btnName={"선택"}
              onClick={()=>{setUseSeniorId(id); openModal2();}}
            />
          </td>
          <td>
            <Button
              className={"btn-small gray-btn"}
              btnName={"보기"}
              onClick={(e) =>{
              setUseUserName(name);
              setUseSeniorId(id);
              openModal();
              }}
          />
          </td>
        </>
      )
    } else {
        return(
    <td>
      <Button
        className={"btn-small gray-btn"}
        btnName={"삭제"}
        onClick={()=>{alert("삭제만들거예여.");}}
      />
    </td>
    )
    }
  }

  return (
    <>
      {/* 담당자 보기 모달 */}
      <Modal_Matching open={modalOpen2} close={closeModal2} header="담당자 배정" />
      {/* 보호자 보기 모달창  */}
      {modalOpen ? <Modal_Guadian open={modalOpen} close={closeModal} header={useName+"님의 가족"} useseniorId={useseniorId}/> : null}
      <table className={className}>
        <thead>
          <tr>
            {head.map((i) => {
              return <th>{i}</th>;
            })}
          </tr>
        </thead>
        <tbody>
          {contents.slice(offset, offset + limit).map((i, index) => {
            const userName = i.user_name;
            const userId = i.user_id
            return (
              <tr key={index}>
                {contentKey.map((kes) => {
                  return (
                    <>
                      <td onClick={() => 
                        navigate(`/SeniorSelectOne/${i.user_id}`, { state: { index } })}>
                            {i[kes]}
                      </td>
                    </>
                  )
                })}
                {buttonPrint(userName, userId)}
              </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;
// `;