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";
import Modal_Questionnaire from "../../component/Modal_Questionnaire.jsx";
import Modal_MedicalHistory from "../../component/Modal_MedicalHistory.jsx";
import Modal_Blood from "../../component/Modal_Blood.jsx";
import Modal_ECG from "../../component/Modal_ECG.jsx";

export default function UserAuthoriySelect() {
    const navigate = useNavigate();
    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 [modalOpen4, setModalOpen4] = React.useState(false);
    const openModal4 = () => {
        setModalOpen4(true);
    };
    const closeModal4 = () => {
        setModalOpen4(false);
    };
    const [tapName, setTapName] = useState("문진표 관리")
    const thead = [
        "No", "이름", "대상자등록번호", "생년월일", "연락처", "주소", "문진표", "내원기록"
    ];
    const key = [
        "No", "name", "number", "birth", "phone", "address", "average", "record"
    ];
    const content = [
        {
            No: 1,
            name: "김복남",
            number: "00000001",
            birth: "1948.11.15",
            phone: "010-1234-5678",
            address: "경상북도 군위군 삼국유사면",
            average: (
                <Button
                    className={"btn-small gray-btn"}
                    btnName={"작성하기"}
                    onClick={openModal}
                />
            ),
            record: (
                <Button
                    className={"btn-small gray-btn"}
                    btnName={"진료 내역"}
                    onClick={openModal2}
                />
            ),
        },

    ];

    const thead1 = [
        "No", "이름", "대상자등록번호", "생년월일", "연락처", "주소", "심전도"
    ];
    const key1 = ["No", "name", "number", "birth", "phone", "address", "ECG"
    ];
    const content1 = [
        {
            No: 1,
            name: "김복남",
            number: "00000001",
            birth: "1948.11.15",
            phone: "010-1234-5678",
            address: "경상북도 군위군 삼국유사면",
            ECG: (
                <Button
                    className={"btn-small gray-btn"}
                    btnName={"등록"}
                    onClick={openModal3}
                />
            ),
        }
    ];
    const thead2 = [
        "No", "이름", "대상자등록번호", "생년월일", "연락처", "주소", "최근등록일", "최고혈압", "최저혈압", "맥박수", "혈압측정",
    ];
    const key2 = [
        "No", "name", "number", "birth", "phone", "address", "recent", "high", "low", "pulse", "average",
    ];
    const content2 = [
        {
            No: 1,
            name: "김복남",
            number: "00000001",
            birth: "1948.11.15",
            phone: "010-1234-5678",
            address: "경상북도 군위군 삼국유사면",
            recent: "2020-01-05",
            high: "130",
            low: "90",
            pulse: "60",
            average: (
                <Button
                    className={"btn-small gray-btn"}
                    btnName={"등록"}
                    onClick={openModal4}
                />
            ),
        },
    ];
    const data = [
        {
            id: 1,
            title: "문진표 관리",
            description: (
                <Table
                    className={"protector-user"}
                    head={thead}
                    contents={content}
                    contentKey={key}
                />
            ),
        },
        {
            id: 2,
            title: "심전도 관리",
            description: (
                <Table
                    className={"senior-table"}
                    head={thead1}
                    contents={content1}
                    contentKey={key1}
                />
            ),
        },
        {
            id: 3,
            title: "혈압 관리",
            description: (
                <Table
                    className={"senior-table"}
                    head={thead2}
                    contents={content2}
                    contentKey={key2}
                />
            ),
        },
    ]
    const [index, setIndex] = React.useState(1);

    return (
        <main>

            <ContentTitle contentTitle={"진료 관리"} explanation={"대상자의 문진표/심전도/혈압 관리를 할 수 있습니다."} />
            <div className="content-wrap">
                <Modal_Questionnaire open={modalOpen} close={closeModal} />
                <Modal_MedicalHistory open={modalOpen2} close={closeModal2} />
                <Modal_ECG open={modalOpen3} close={closeModal3} />
                <Modal_Blood open={modalOpen4} close={closeModal4} />
                <div
                    style={{ height: "calc(100% - 61px)" }}
                >
                    <div className="right" style={{ height: "100%", }}>
                        <div style={{ height: "100%" }}>
                            <div className="tab-container">
                                <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-end 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>
    );
}