import React,{useState} from "react";
import Title from "../../component/Title.jsx";
import Map from "../../component/chart/Map.jsx";
import Chart5 from "../../component/chart/Chart5.jsx";
import Chart2_govern from "../../component/chart/Chart2_govern.jsx";
import Donut1_govern from "../../component/chart/Donut1_govern.jsx";
import RowChart_govern from "../../component/chart/RowChart_govern.jsx";
import AddCircleIcon from "@mui/icons-material/AddCircle";
import BatteryCharging20Icon from '@mui/icons-material/BatteryCharging20';
import DeviceThermostatIcon from '@mui/icons-material/DeviceThermostat';
import MedicationIcon from '@mui/icons-material/Medication';
import ElderlyIcon from '@mui/icons-material/Elderly';

export default function Main_government() {
  const [cityName, setCityName] = useState("군위군");
  // const tableHead = ["방문날짜", "방문사유", "방문 상세 사유"];
  // const Key = ["date", "reason", "detail_reason"];
  // const content = [
  //   {
  //     date: "2022.12.12",
  //     reason: "어르신케어",
  //     detail_reason: "하루동안 미복약으로 방문. 방문시 두통을 호소하셔 병원 동행",
  //   },
  // ];

  // //노인리스트
  // const tableHead2 = [
  //   "이름",
  //   "요양등급",
  //   "생년월일",
  //   "연락처",
  //   "주소",
  //   "기저질환",
  // ];
  // const Key2 = [
  //   "name",
  //   "level_of_care",
  //   "birth",
  //   "phone",
  //   "address",
  //   "management_number",
  // ];
  // const content2 = [
  //   {
  //     name: "김복남",
  //     level_of_care: "1등급",
  //     birth: "1948.11.15",
  //     phone: "010-1234-5678",
  //     address: "경상북도 군위군 삼국유사면",
  //     management_number: "혈압",
  //   },
  //   {
  //     name: "홍길동",
  //     level_of_care: "2등급",
  //     birth: "1948.05.18",
  //     phone: "010-3333-3333",
  //     address: "경상북도 군위군 삼국유사면",
  //     management_number: "당뇨",
  //   },
  //   {
  //     name: "김말순",
  //     level_of_care: "3등급",
  //     birth: "1939.03.19",
  //     phone: "010-3333-4444",
  //     address: "경상북도 군위군 삼국유사면",
  //     management_number: "천식",
  //   },
  //   {
  //     name: "신정길",
  //     level_of_care: "1등급",
  //     birth: "1945.05.19",
  //     phone: "010-3333-5555",
  //     address: "경상북도 군위군 삼국유사면",
  //     management_number: "폐렴",
  //   },
  //   {
  //     name: "김정남",
  //     level_of_care: "1등급",
  //     birth: "1945.05.19",
  //     phone: "010-3333-6666",
  //     address: "경상북도 군위군 삼국유사면",
  //     management_number: "인지장애",
  //   },
  // ];

  return (
    <main>
      <div className="main-grid-government">
        <ul className="content-box statistics-govern" background="#f7acba">
          <li> 
            <p><ElderlyIcon sx={{ width: "50px", height: "50px", color: "#ffffff", background:"#bf0629", borderRadius:"50px" }}/></p>           
            <p>{cityName} 전체 대상자</p>
            <p>400</p>
          </li>
                  </ul>
        <ul className="content-box statistics-govern" background="#8ef3d1">
          <li>
           <p><MedicationIcon sx={{ width: "50px", height: "50px", color: "#ffffff", background:"#076143", borderRadius:"50px" }}/></p>
            <p>{cityName} 미복약 위험 대상자</p>
            <p>400</p>
          </li>
        </ul>
        <ul className="content-box statistics-govern" background="#ebe7b9" >
          <li>
             <p><DeviceThermostatIcon sx={{ width: "50px", height: "50px", color: "#ffffff", background:"#f1de05", borderRadius:"50px" }}/></p>
            <p>{cityName} 댁내 온도 위험 대상자</p>
            <p>400</p>
          </li>
        </ul>
        <ul className="content-box statistics-govern" background="#5f9af3">
          <li>
            <p><BatteryCharging20Icon sx={{ width: "50px", height: "50px", color: "#ffffff", background:"#5f9af3", borderRadius:"50px" }}/></p>
            <p>{cityName} 배터리 부족 대상자 </p>
            <p>400</p>
          </li>
        </ul>
        <div className="content-box combine-all-government combine-bottom-government2">
        <div className="flex">
            <Title title={`${cityName} 월별 방문 횟수`} explanation={"최근 6개월간 방문 횟수의 변화를 확인할 수 있습니다."} />
            <AddCircleIcon sx={{ fontSize: 20, color: "#1976d2" }} />
          </div>
          <RowChart_govern />
        </div>
        <div className="content-box combine-left-government combine-bottom-government2 main-main">
          <div className="flex">
            <Title title={"지역별 케어 대상자 분포 현황"} explanation={"지역 선택 시 해당 지역의 대상자리스트가 보여집니다."} />
            <AddCircleIcon sx={{ fontSize: 20, color: "#1976d2" }} />
          </div>
          <Map setCityName={setCityName} />
        </div>
        <div className="content-box combine-left-government2">
          <div className="flex">
            <Title title={`${cityName} 복용률 평균`} explanation={"해당 지역의 대상자 복용률이 그래프로 보여집니다."} />
            <AddCircleIcon sx={{ fontSize: 20, color: "#1976d2" }} />
          </div>
          <Chart2_govern />
        </div>
        <div className="content-box combine-right-government2">
        <div className="flex">
            <Title title={`기관별 대상자 등록 현황`} explanation={"약상자 사용자의 데이터 차트가 보여집니다."} />
            <AddCircleIcon sx={{ fontSize: 20, color: "#1976d2" }} />
          </div>
          <Chart5 />         
        </div>
        <div className="content-box combine-right-government">
          <div className="flex">
            <Title title={`기관별 약상자 사용 현황`} explanation={""} />
            <AddCircleIcon sx={{ fontSize: 20, color: "#1976d2" }} />
          </div>
          <Donut1_govern />
        </div>        
      </div>
    </main>
  );
}