import React from "react";
import Title from "../../component/Title.jsx";
import Table from "../../component/Table.jsx";
import Calendar from "../../component/Calendar.jsx";
import TitleSmall from "../../component/TitleSmall.jsx";
import DateDay from "../../component/DateDay.jsx";
import DateMonth from "../../component/DateMonth.jsx";
import Chart6 from "../../component/chart/Chart6.jsx";
import ClearIcon from '@mui/icons-material/Clear';
import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
import ErrorIcon from '@mui/icons-material/Error';
import Senior from '../../../resources/files/images/senior.png';
import battery from '../../../resources/files/images/battery.png';
import zeropercent from '../../../resources/files/images/zeropercent.png';
import pullpercent from '../../../resources/files/images/pullpercent.png';
import twentypercent from '../../../resources/files/images/twentypercent.png';
import fortypercent from '../../../resources/files/images/fortypercent.png';
import eightytypercent from '../../../resources/files/images/eightypercent.png';
import sixtytypercent from '../../../resources/files/images/sixtypercent.png';
import calendar from '../../../resources/files/images/calendar.png';
import temperature from '../../../resources/files/images/temperature.png';
import medicine from '../../../resources/files/images/medicine.png';
import calendarBig from '../../../resources/files/images/calendarBig.png';
import mornon from '../../../resources/files/images/mornon.png';
import mornoff from '../../../resources/files/images/mornoff.png';
import lunchon from '../../../resources/files/images/lunchon.png';
import lunchoff from '../../../resources/files/images/lunchoff.png';
import dinneron from '../../../resources/files/images/dinneron.png';
import dinneroff from '../../../resources/files/images/dinneroff.png';

export default function Main_guardian() {
  const tableHead1 = ["", "", "", "", "", ""];
  const Key1 = ["morning", "morning2", "lunch","lunch2", "dinner","dinner2"];
  const content1 = [
    {
      morning: "아침",
      morning2:(
        <CheckCircleOutlineIcon sx={{ width: "3rem", height: "3rem", color: "#067943", borderRadius: "50px" }}/> 
      ),
      lunch: "점심",
      lunch2: (
        <CheckCircleOutlineIcon sx={{ width: "3rem", height: "3rem", color: "#067943", borderRadius: "50px" }}/> 
      ),
      dinner: "저녁",
      dinner2: (
        <CheckCircleOutlineIcon sx={{ width: "3rem", height: "3rem", color: "#067943", borderRadius: "50px" }}/> 
      ),
    }
  ];
  const tableHead2 = ["", "", "", "", "", ""];
  const Key2 = ["morning", "morning2", "lunch","lunch2", "dinner","dinner2"];
  const content2 = [
    {
      morning: "아침",
      morning2:(
        <ClearIcon sx={{ width: "3rem", height: "3rem", color: "#bf0629", borderRadius: "50px" }}/> 
      ),
      lunch: "점심",
      lunch2: (
        <ClearIcon sx={{ width: "3rem", height: "3rem", color: "#bf0629", borderRadius: "50px" }}/> 
      ),
      dinner: "저녁",
      dinner2: (
        <ClearIcon sx={{ width: "3rem", height: "3rem", color: "#bf0629", borderRadius: "50px" }}/> 
      ),
    }
  ];
  const tableHead3 = ["월", "화", "수", "목", "금", "토", "일"];
  const Key3 = ["mon", "tue", "wed","thu", "fri","sat","sun"];
  const content3 = [
    {
      mon: "24°C",
      tue: "24°C",
      wed: "24°C",
      thu: "24°C",
      fri: "24°C",
      sat: "24°C",
      sun: "24°C",
    }
  ];


  return (
    <>
      <main>
        <div className="flex-start main-guardian"><img src={Senior} alt="" /><Title title={"김복남 어르신"} explanation={"방문, 복약, 온도, 배터리 현황을 확인하세요."} /></div>
        <div className="main-grid-guardian">
          <div className=" statistics-guardian combine-left2 combine-middle-government">
          <div className="flex-start margin-bottom2"><img src={calendarBig} alt="" /><TitleSmall title={"방문체크"} /></div>
            <ul >         
              <li>
              <Calendar />
              </li>     
            </ul>
          </div>
          <div className=" statistics-guardian combine-right3">
          <div className="flex-start margin-bottom2"><img src={temperature} alt="" /><TitleSmall title={"온도체크"} explanation={"댁내 온도가 적절한지 체크해보세요."}/></div>
            <ul >
              <li>
                <DateMonth />
                <Chart6 />
              </li>   
            </ul>
          </div>
          
          <div className="statistics-guardian combine-right3">
          <div className="flex-start margin-bottom2"><img src={medicine} alt="" /><TitleSmall title={"복약체크"} explanation={"약을 잘 복용하고 계신지 체크해주세요."}/></div>
            <ul className="">
              <li className="guardian-medicine">
                <DateDay />
                <ul className="flex">
                  <li>
                    <img src={mornon} alt="" className="show"/>
                    <img src={mornoff} alt="" />
                  </li>
                  <li>
                    <img src={lunchon} alt="" />
                    <img src={lunchoff} alt="" className="show"/>
                  </li>
                  <li>
                    <img src={dinneron} alt="" />
                    <img src={dinneroff} alt="" className="show"/>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
          <div className="combine-left combine-all-government battery-wrap ">
            <div className="battery flex-start"><img src={battery} alt="" /><p>현재 스마트 약상자의 배터리가 <em className="red">40</em>% 입니다.</p><p className="red">※충전이 필요합니다.</p></div> 
            <div className="battery-img"> 
              {/* 0%일때 */}
              <img src={zeropercent} alt="" /> 
              {/* 0~20%일때 */}
              <img src={twentypercent} alt="" />
              {/* 20~40%일때 */}
              <img src={fortypercent} alt="" className="show"/>
              {/* 40~60%일때 */}
              <img src={sixtytypercent} alt="" />
              {/* 60~80% 일때 */}
              <img src={eightytypercent} alt="" />
              {/* 80~100%일때 */}
              <img src={pullpercent} alt="" />
            </div>

          </div>
        </div>
      </main>
    </>
  );
}