import React, { useState } from "react";
import ContentTitle from "../../component/ContentTitle.jsx";
import SubTitle from "../../component/SubTitle.jsx";
import Modal from "../../component/Modal.jsx";
import Table from "../../component/Table.jsx";
import Button from "../../component/Button.jsx";
import { useNavigate } from "react-router";
import { width } from "@mui/system";
import DetailSearch from "../../component/DetailSearch.jsx";
import DetailTitle from "../../component/DetailTitle.jsx";

export default function UserAuthoriySelect() {
    const navigate = useNavigate();
    const [tapName, setTapName] = useState("복약관리")
    const thead = [
        "No", "이름", "대상자등록번호", "생년월일", "연락처", "주소", "최근 복약률",
    ];
    const key = [
        "No", "name", "number", "birth", "phone", "address", "average"
    ];
    const content = [
        {
            No: 1,
            name: "김복남",
            number: "00000001",
            birth: "1948.11.15",
            phone: "010-1234-5678",
            address: "경상북도 군위군 삼국유사면",
            agency: "A복지관",
            protect: "홍길동",
            average: "0%",
        },

    ];

    const thead1 = [
        "No", "이름", "대상자등록번호", "생년월일", "연락처", "주소", "최근 최저 온도", "최근 최고 온도",
    ];
    const key1 = ["No", "name", "number", "birth", "phone", "address", "low", "high"
    ];
    const content1 = [
        {
            No: 1,
            name: "김복남",
            number: "00000001",
            birth: "1948.11.15",
            phone: "010-1234-5678",
            address: "경상북도 군위군 삼국유사면",
            agency: "A복지관",
            protect: "홍길동",
            high: "18°C",
            low: "18°C",
        }
    ];
    const thead2 = [
        "No", "이름", "대상자등록번호", "생년월일", "연락처", "주소", , "최근 방문일", "방문목적", "상세사유",
    ];
    const key2 = [
        "No", "name", "number", "birth", "phone", "address", "visit", "reason", "reason_detail"
    ];
    const content2 = [
        {
            No: 1,
            name: "김복남",
            number: "00000001",
            birth: "1948.11.15",
            phone: "010-1234-5678",
            address: "경상북도 군위군 삼국유사면",
            visit: "2023.02.08",
            reason: "정기방문",
            reason_detail: "정기방문일",
        },
    ];
    const data = [
        {
            id: 1,
            title: "복약관리",
            description: (
                <Table
                    className={"protector-user"}
                    head={thead}
                    contents={content}
                    contentKey={key}
                    onClick={() => {
                        navigate("/MedicineCareSelectOne");
                    }}
                />
            ),
        },
        {
            id: 2,
            title: "댁내온도관리",
            description: (
                <Table
                    className={"senior-table"}
                    head={thead1}
                    contents={content1}
                    contentKey={key1}
                    onClick={() => {
                        navigate("/TemperatureManagementSelectOne");
                    }}
                />
            ),
        },
        {
            id: 3,
            title: "방문관리",
            description: (
                <Table
                    className={"senior-table"}
                    head={thead2}
                    contents={content2}
                    contentKey={key2}
                    onClick={() => {
                        navigate("/VisitSelectOne");
                    }}
                />
            ),
        },
    ]
    const [index, setIndex] = React.useState(1);

    return (
        <main>
            <ContentTitle contentTitle={"건강 관리"} explanation={"대상자의 복약/댁내온도/방문 관리를 할 수 있습니다."} />
            <div className="content-wrap">

                <div
                    style={{ height: "calc(100% - 61px)" }}
                >
                    <div className="right" style={{ height: "100%", }}>
                        <div style={{ height: "100%" }}>
                            <div className="tab-container">
                                <ul className="tab-menu-mobile">
                                    <div>
                                        <SubTitle
                                            className="margin-bottom"
                                            subtitle={"사용자 선택"}
                                            explanation={"사용자 별로 선택 후 관리할 수 있습니다. "}
                                        />
                                    </div>
                                    <select name="" id="" style={{ width: "100%" }}>
                                        <option value="사용자선택">보호자</option>
                                        <option value="사용자선택">보호사</option>
                                        <option value="사용자선택">병원</option>
                                        <option value="사용자선택">지자체</option>
                                        <option value="사용자선택">관리자</option>
                                    </select>
                                </ul>
                                <ul className="tab-menu flex-end">
                                    {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 userlist">
                                    <DetailTitle contentTitle={`${tapName}`} />
                                    <div className="search-management flex-start margin-bottom2">
                                        <DetailSearch />
                                    </div>
                                    <div className="flex">
                                        <SubTitle explanation={"대상자 클릭 시 상세페이지로 이동합니다."} className="margin-bottom" />
                                        <div className="flex searchselect">
                                            <input type="radio"/>
                                            <label htmlFor="">나의 대상자 보기</label>
                                            <input type="radio" />
                                            <label htmlFor="">전체 대상자 보기</label>
                                        </div>
                                    </div>
                                    <ul className="tab-content">
                                        {data
                                            .filter((item) => index === item.id)
                                            .map((item) => (
                                                <li>{item.description}</li>
                                            ))}
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    );
}