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

export default function RiskSet() {
  const navigate = useNavigate();
  const thead1 = [
    "",
    "",
    "",
    "",
    "",
    "",
  ];
  const key1 = [
    "text",
    "date",
    "text1",
    "text4",
    "temp",
    "text3",];
  const content1 = [
    {
      text: "최근 평균 온도가",
      text4: (
        <input type="number" />
      ),
      temp: (
        <select>
                <option value="">이상</option>
                <option value="">이하</option>
              </select>
      ),
      text3: "일 경우 위험알림으로 지정합니다.",
    },
  ];
  const thead2 = [
    "",
    "",
    "",
  ];
  const key2 = [
    "text",
    "date",
    "text2",];
  const content2 = [
    {
      text: "미복약 횟수가 누적",
      date:(
        <input type="number" />
      ),
      text2: "회 이상일 경우 위험알림으로 지정합니다.",
    },
  ];
  const thead3 = [
    "",
    "",
    "",
  ];
  const key3 = [
    "text",
    "date",
    "text2",];
  const content3 = [
    {
      text: "배터리 잔량이 최근",
      date: (
        <input type="number" />
      ),
      text2: "% 이하일 경우 위험알림으로 지정합니다.",
    },
  ];
 


  const data = [
    {
      id: 1,
      title: "온도 관리",
      description: (
        <TableRisk
          className={"risk-table"}
          head={thead1}
          contents={content1}
          contentKey={key1}
        />
      ),
    },
    {
      id: 2,
      title: "복약 관리",
      description: (
        <TableRisk
          className={"risk-table"}
          head={thead2}
          contents={content2}
          contentKey={key2}
        />
      ),
    },
    {
      id: 3,
      title: "배터리 관리",
      description: (
        <TableRisk
          className={"risk-table"}
          head={thead3}
          contents={content3}
          contentKey={key3}
        />
      ),
    },
  ];
  const [index, setIndex] = React.useState(1);
  return (
    <main>
<ContentTitle contentTitle={"위험 기준 관리 "} />
      <div className="tab-container">
        <ul className="tab-menu flex-start">
          {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">
        <SubTitle
                  className="margin-bottom"
                  explanation={"지정한 기준에 따라 메인 화면에 위험 알림 대상자 수를 표시하여 줍니다."}
                  color={"#333333"}
                />          
          <div className="btn-wrap flex-end margin-bottom ">
            <Button
              className={"btn-small gray-btn"}
              btnName={"저장"}
            />
          </div>
          <ul className="tab-content">
            {data
              .filter((item) => index === item.id)
              .map((item) => (
                <li>{item.description}</li>
              ))}
          </ul>
        </div>
      </div>
    </main>
  );
}