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


export default function EquipmentManagementSelect() {

  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 [modalOpen3, setModalOpen3] = React.useState(false);
  const openModal3 = () => {
    setModalOpen3(true);
  };
  const closeModal3 = () => {
    setModalOpen3(false);
  };
  const navigate = useNavigate();
  const thead1 = [
    "No",
    "장비명",
    "시리얼 넘버",
    "입고일자",
    "사용여부",
    "보유 기관", //관리기관, 올잇메디
    "담당자",//시행기관
  ];
  const key1 = [
    "No",
    "equipment",
    "serialNumber",
    "date",
    "use",
    "agency",
    "protector",
  ];
  const content1 = [
    {
      No: 1,
      equipment: "스마트약상자",
      serialNumber: "ABCD-1",
      date: "2022.12.02",
      use: "사용",
      agency: "A복지관",
      protector: "김복지",
    },
    {
      No: 2,
      equipment: "스마트약상자",
      serialNumber: "ABCD-1",
      date: "2022.12.02",
      use: "미사용",
      agency: "B복지관",
      protector: "-"
    },
  ];
  const thead3 = [
    "No",
    "장비명",
    "시리얼 넘버",
    "입고일자",
    "납품 기관",//관리기관, 올잇메디
    "대상자",//시행기관
  ];
  const key3 = [
    "No",
    "equipment",
    "serialNumber",
    "date",
    "agency",
    "senior",
  ];
  const content3 = [
    {
      No: 1,
      equipment: "스마트약상자",
      serialNumber: "ABCD-1",
      date: "2022.12.02",
      agency: (
        <Button
          className={"btn-small gray-btn"}
          btnName={"선택"}
          onClick={openModal}
        />
      ),
      senior: (
        <Button
          className={"btn-small gray-btn"}
          btnName={"선택"}
          onClick={openModal2}
        />
      ),
    },
    {
      No: 2,
      equipment: "스마트약상자",
      serialNumber: "ABCD-1",
      date: "2022.12.02",
      agency: (<Button
        className={"btn-small gray-btn"}
        btnName={"선택"}
        onClick={openModal}
      />),
      senior: (
        <Button
          className={"btn-small gray-btn"}
          btnName={"선택"}
          onClick={openModal2}
        />
      ),
    },
  ];
  const thead2 = [
    "No",
    "장비명",
    "시리얼 넘버",
    "대여일",
    "배터리 잔량",
    "보유기관",//관리기관, 올잇메디
    "담당자",//시행기관
  ];
  const key2 = [
    "No",
    "equipment",
    "serialNumber",
    "date",
    "battery",
    "agency",
    "protector",
  ];
  const content2 = [
    {
      No: 1,
      equipment: "스마트약상자",
      serialNumber: "ABCD-1",
      date: "2022.12.02",
      battery: "10%",
      agency: "A복지관",
      protector: "김복지"

    },
  ];
  const thead4 = [
    "No",
    "기관명",
    "선택하기",
  ];
  const key4 = [
    "No",
    "agency",
    "choice",
  ];
  const content4 = [
    {
      No: 1,
      agency: (
        <div>
          <Category />
        </div>
      )
      ,
      choice: (<Button
        className={"btn-small gray-btn"}
        btnName={"선택"}
      />)

    },
  ];
  const thead5 = [
    "No",
    "대상자",
    "선택하기",
  ];
  const key5 = [
    "No",
    "senior",
    "choice",
  ];
  const content5 = [
    {
      No: 1,
      senior: (
        <div>
          <input type="text" list="senior_list" />
          <datalist id="senior_list">
            <option value="대상자1(ID)"></option>
            <option value="대상자2(ID)"></option>
            <option value="대상자3(ID)"></option>
          </datalist>
        </div>
      )
      ,
      choice: (<Button
        className={"btn-small gray-btn"}
        btnName={"선택"}
      />)

    },
  ];



  const data = [
    {
      id: 1,
      title: "장비 전체(205)",
      description: (
        <div>
          <div className="flex">
            <SubTitle explanation={"장비 클릭 시 지난 매칭이력을 확인할 수 있습니다."} />
            <div className="btn-wrap flex-end margin-bottom ">
              <Button
                className={"btn-small green-btn"}
                btnName={"등록"}
                onClick={openModal3}
              />
            </div>
          </div>
          <Table
            className={"caregiver-user"}
            head={thead1}
            contents={content1}
            contentKey={key1}
            onClick={() => {
              navigate("/EquipmentManagementSelectOne");
            }}
          />
        </div>
      ),
    },
    {
      id: 2,
      title: "재고(미사용) 장비(5)", //에이젼시로 들어가면 미사용 장비(5)로 나와야 함
      description: (
        <div>
          <Table
            className={"caregiver-user"}
            head={thead3}
            contents={content3}
            contentKey={key3}
          />
        </div>
      ),
    },
    {
      id: 3,
      title: "납품(내가 사용중인) 장비(200)",//에이젼시로 들어가면 내가 사용중인 장비(5)로 나와야 함
      description: (
        <Table
          className={"caregiver-user"}
          head={thead2}
          contents={content2}
          contentKey={key2}
        />
      ),
    },
  ];
  const [index, setIndex] = React.useState(1);
  return (
    <main>
      <Modal open={modalOpen} close={closeModal} header="납품 기관 선택">
        <div className="board-wrap">
          <div>
            <Table
              className={"caregiver-user"}
              head={thead4}
              contents={content4}
              contentKey={key4}
            />
          </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>
            <Table
              className={"caregiver-user"}
              head={thead5}
              contents={content5}
              contentKey={key5}
            />
          </div>
          <div>
            <Button
              className={"btn-100 green-btn"}
              btnName={"닫기"}
              onClick={closeModal2}
            />
          </div>
        </div>
      </Modal>
      <Modal open={modalOpen3} close={closeModal3} header="대상자 선택">
        <div className="board-wrap">
          <div>
          <table className="flex70 margin-bottom">
            <tbody className="equipment-insert">
              <tr>
                <th>장비명</th>
                <td colSpan={5}>
                  <input type="text" name="" id="" />
                </td>
              </tr>
              <tr>
                <th>시리얼 넘버</th>
                <td colSpan={5}>
                  <input type="text" name="" id="" />
                </td>
              </tr>
              <tr>
                <th>입고일자</th>
                <td colSpan={5}>
                  <input type="text" name="" id="" />
                </td>
              </tr>            
            </tbody>
          </table>
          </div>
          <div>
            <Button
              className={"btn-100 green-btn"}
              btnName={"저장"}
              onClick={closeModal3}
            />
          </div>
        </div>
      </Modal>
      <div className="tab-container">
        <ul className="tab-menu">
          {data.map((item) => (
            <li
              key={item.id}
              className={index === item.id ? "active" : null}
              onClick={() => setIndex(item.id)}
            >
              {item.title}
            </li>
          ))}
        </ul>
        <div className="content-wrap">
          <div className="search-management flex-end margin-bottom2">
            <select name="management-agency">
              <option value="기관전체">기관전체</option>
              <option value="대구보훈병원">복지재단1</option>
              <option value="군위군청">복지재단2</option>
              <option value="군위군청">복지재단3</option>
            </select>
            <select>
              <option value="이름">이름</option>
              <option value="아이디">아이디</option>
            </select>
            <input type="text" />
            <Button
              className={"btn-small gray-btn"}
              btnName={"검색"}
              onClick={() => navigate("")}
            />
          </div>

          <ul className="tab-content">
            {data
              .filter((item) => index === item.id)
              .map((item) => (
                <li>{item.description}</li>
              ))}
          </ul>
        </div>
      </div>
    </main>
  );
}