import React from "react";
import { useNavigate, useLocation } from "react-router";
import { useSelector } from "react-redux";
import Title from "../../component/Title.jsx";
import Table from "../../component/Table.jsx";
import Map from "../../component/chart/Map.jsx";
import Chart from "../../component/chart/Chart.jsx";
import Chart5_agency from "../../component/chart/Chart5_agency.jsx";
import Chart2_agency from "../../component/chart/Chart2_agency.jsx";
import AddCircleIcon from "@mui/icons-material/AddCircle";
import Calendar_agency from "../../component/Calendar_agency.jsx";
import Chart10 from "../../component/chart/Chart10.jsx";
import Chart7 from "../../component/chart/Chart7.jsx";
import Chart8 from "../../component/chart/Chart8.jsx";
import tool from "../../../resources/files/images/tool.png";
import medicinebox from "../../../resources/files/images/medicinebox.png";
import box from "../../../resources/files/images/box.png";
import exchange from "../../../resources/files/images/exchange.png";
import error from "../../../resources/files/images/error.png";
import batteryAgency from "../../../resources/files/images/batteryAgency.png";
import medicineAgency from "../../../resources/files/images/medicineAgency.png";
import temperatureAgency from "../../../resources/files/images/temperatureAgency.png";
import wifioff from "../../../resources/files/images/wifioff.png";
import TitleSmall from "../../component/TitleSmall.jsx";

import CommonUtil from "../../../resources/js/CommonUtil.js";

export default function Main2() {
  const navigate = useNavigate();
  const location = useLocation();

  //전역 변수 저장 객체
  const state = useSelector((state) => {
    return state;
  });

  const thead = ["No", "계약업체명", "구분", "담당자 연락처", "주소"];
  const key = ["No", "agency", "division", "phone", "address"];
  const content = [
    {
      No: (
        <p>
          <span>{thead[0]}</span> 1948.11.15
        </p>
      ),
      agency: (
        <p>
          <span>{thead[1]}</span> A복지관
        </p>
      ),
      division: (
        <p>
          <span>{thead[2]}</span>교환
        </p>
      ),
      phone: (
        <p>
          <span>{thead[3]}</span>010-1234-5678
        </p>
      ),
      address: (
        <p>
          <span>{thead[4]}</span>경상북도 군위군 삼국유사면
        </p>
      ),
    },
  ];

  // 내 시니어
  const [mySenior, setMySenior] = React.useState({
    seniorList: [],
    seniorListCount: 0,
    search: {
      agent_id: state.loginUser["user_id"],
      user_use: true,
    },
  });
  // 내 시니어 목록 조회
  const [seniorGenderData, setSeniorGenderData] = React.useState([]);
  const mySeniorSelectList = () => {
    fetch("/user/seniorSelectList.json", {
      method: "POST",
      headers: {
        "Content-Type": "application/json; charset=UTF-8",
      },
      body: JSON.stringify(mySenior.search),
    })
      .then((response) => response.json())
      .then((data) => {
        data.search = mySenior.search;
        console.log("내 시니어 목록 조회 : ", data);
        setMySenior(data);

        let seniorGenderArr = [];
        const today = new Date();
        data["seniorList"].map((item, idx) => {
          const birth = new Date(item["user_birth"]);
          let age = today.getFullYear() - birth.getFullYear() + 1;
          seniorGenderArr.push({ gender: item["user_gender"], age: age });
        });
        console.log("seniorGenderArr: ", seniorGenderArr);

        let genderData = [];
        for (let i = 0; i < 18; i++) {
          let age = i * 5;
          let age1 = (i + 1) * 5 - 1;
          if (i == 17) {
            genderData.push({ age: age + "+", male: 0, female: 0 });
          } else {
            genderData.push({ age: age + "-" + age1, male: 0, female: 0 });
          }
        }
        console.log("genderData: ", genderData);

        seniorGenderArr.map((item, idx) => {
          for (let i = 0; i < 18; i++) {
            if (item["age"] >= i * 5 && item["age"] <= (i + 1) * 5 - 1) {
              if (item["gender"] == "남") {
                genderData[i]["male"]--;
              } else if (item["gender"] == "여") {
                genderData[i]["female"]++;
              }
            }
          }
        });

        setSeniorGenderData(genderData);
        console.log("genderData: ", genderData);
      })
      .catch((error) => {
        console.log(
          "seniorSelectList() /user/seniorSelectList.json error : ",
          error
        );
      });
  };

  //온도 위험 대상자(시니어) 수 조회
  const [temperatureCount, setTemperatureCount] = React.useState(0);
  const temperatureRiskCount = () => {
    fetch("/stats/temperatureRisk.json", {
      method: "POST",
      headers: {
        "Content-Type": "application/json; charset=UTF-8",
      },
      body: JSON.stringify({
        agent_id: state.loginUser["user_id"],
      }),
    })
      .then((response) => response.json())
      .then((data) => {
        console.log("온도 위험 대상자(시니어) 수 조회 : ", data);
        setTemperatureCount(data);
      })
      .catch((error) => {
        console.log(
          "temperatureRiskCount() /stats/temperatureRisk.json error : ",
          error
        );
      });
  };

  //배터리 부족 대상자(시니어) 수 조회
  const [batteryCount, setbatteryCount] = React.useState(0);
  const batteryRiskCount = () => {
    fetch("/stats/batteryRisk.json", {
      method: "POST",
      headers: {
        "Content-Type": "application/json; charset=UTF-8",
      },
      body: JSON.stringify({
        agent_id: state.loginUser["user_id"],
      }),
    })
      .then((response) => response.json())
      .then((data) => {
        console.log("배터리 부족 대상자(시니어) 수 조회 : ", data);
        setbatteryCount(data);
      })
      .catch((error) => {
        console.log(
          "batteryRiskCount() /stats/batteryRisk.json error : ",
          error
        );
      });
  };

  //데이터 미확인 대상자(시니어) 수 조회
  const [receiveDataMissCount, setReceiveDataMissCount] = React.useState(0);
  const receiveDataMissRiskCount = () => {
    fetch("/stats/receiveDataMissCount.json", {
      method: "POST",
      headers: {
        "Content-Type": "application/json; charset=UTF-8",
      },
      body: JSON.stringify({
        agent_id: state.loginUser["user_id"],
      }),
    })
      .then((response) => response.json())
      .then((data) => {
        console.log("데이터 미확인 대상자(시니어) 수 조회 : ", data);
        setReceiveDataMissCount(data);
      })
      .catch((error) => {
        console.log(
          "receiveDataMissRiskCount() /stats/receiveDataMissCount.json error : ",
          error
        );
      });
  };

  // 최근 복약률
  const [medicationSelectListByNew, setMedicationSelectListByNew] =
    React.useState([]);
  // 최근 복약률 조회
  const seniorMedicationSelectListByNew = () => {
    fetch("/user/seniorMedicationSelectListByNew.json", {
      method: "POST",
      headers: {
        "Content-Type": "application/json; charset=UTF-8",
      },
      body: JSON.stringify({
        agent_id: state.loginUser["user_id"],
      }),
    })
      .then((response) => response.json())
      .then((data) => {
        console.log("seniorMedicationSelectListByNew : ", data);
        setMedicationSelectListByNew(data);
      })
      .catch((error) => {
        console.log(
          "seniorMedicationSelectListByNew() /user/seniorMedicationSelectListByNew.json error : ",
          error
        );
      });
  };

  // 복약률 목록
  const [medicationSelectListByMonth, setMedicationSelectListByMonth] =
    React.useState([]);
  const [medicationSelectListByYear, setMedicationSelectListByYear] =
    React.useState([]);
  // 복약률 목록 조회
  const seniorMedicationSelectListByMonth = () => {
    let totalYearArr = [];
    let yearArr = [];

    fetch("/user/seniorMedicationSelectListByMonth.json", {
      method: "POST",
      headers: {
        "Content-Type": "application/json; charset=UTF-8",
      },
      body: JSON.stringify({ agency_id: state.loginUser["agency_id"] }),
    })
      .then((response) => response.json())
      .then((data) => {
        data.map((item, idx) => {
          item["year"] = item["medication_default_date"].substr(0, 4);
          item["month"] = item["medication_default_date"].substr(5, 2);
          totalYearArr.push(item["medication_default_date"].substr(0, 4));
          item["date"] = new Date(item["medication_default_date"]).getTime();
        });

        const setYearArr = [...new Set(totalYearArr)];
        console.log("totalYearArr: ", setYearArr);

        setYearArr.map((year, yearIdx) => {
          let sum = 0;
          let count = 0;
          let avg = 0;

          let monthArr = [
            "-",
            "-",
            "-",
            "-",
            "-",
            "-",
            "-",
            "-",
            "-",
            "-",
            "-",
            "-",
          ];

          data.map((item, idx) => {
            if (item["year"] == year) {
              sum += item["average"];
              count++;
              monthArr[Number(item["month"]) - 1] = item["average"];
            }
          });

          avg = parseInt(sum / count);
          yearArr.push({ year: [year], average: avg, data: monthArr });
        });

        console.log("yearArr : ", yearArr);
        setMedicationSelectListByYear(yearArr);

        console.log("seniorMedicationSelectListByMonth : ", data);
        setMedicationSelectListByMonth(data);
      })
      .catch((error) => {
        console.log(
          "seniorMedicationSelectListByMonth() /user/seniorMedicationSelectListByMonth.json error : ",
          error
        );
      });
  };

  React.useEffect(() => {
    temperatureRiskCount();
    batteryRiskCount();
    receiveDataMissRiskCount();
    seniorMedicationSelectListByNew();
    seniorMedicationSelectListByMonth();
    mySeniorSelectList();
  }, []);

  return (
    <main>
      <div className="flex-start margin-bottom2">
        <img src={medicinebox} alt="" />
        <TitleSmall
          title={"대상자 현황"}
          explanation={
            new Date(new Date().setDate(new Date().getDate() - 1))
              .toLocaleDateString()
              .replace(/\./g, "")
              .replace(/\s/g, "-") + " 기준"
          }
        />
      </div>
      <div className="main-grid-agency margin-bottom2">
        <ul className="content-box statistics-agency" background="#8ef3d1">
          <li
            className="flex-start"
            onClick={() => {
              navigate("/Healthcare");
            }}
          >
            <img src={medicineAgency} alt="" />
            <div className="text">
              <p>미복약 위험 대상자</p>
              <p className="peoplecount">0</p>
            </div>
          </li>
        </ul>
        <ul className="content-box statistics-agency" background="#ebe7b9">
          <li
            className="flex-start"
            onClick={() => {
              navigate("/Healthcare");
            }}
          >
            <img src={temperatureAgency} alt="" />
            <div className="text">
              <p>댁내 온도 위험 대상자</p>
              <p className="peoplecount">{temperatureCount}</p>
            </div>
          </li>
        </ul>
        <ul className="content-box statistics-agency" background="#5f9af3">
          <li
            className="flex-start"
            onClick={() => {
              navigate("/Healthcare");
            }}
          >
            <img src={batteryAgency} alt="" />
            <div className="text">
              <p>배터리 부족 대상자</p>
              <p className="peoplecount">{batteryCount}</p>
            </div>
          </li>
        </ul>
        <ul className="content-box statistics-agency" background="#8080FF">
          <li
            className="flex-start"
            onClick={() => {
              navigate("/Healthcare");
            }}
          >
            <img src={wifioff} alt="" />
            <div className="text">
              <p>데이터 미확인 대상자</p>
              <p className="peoplecount">{receiveDataMissCount}</p>
            </div>
          </li>
        </ul>
      </div>
      <div className="flex-start margin-bottom2">
        <img src={medicinebox} alt="" />
        <TitleSmall title={"대상자 복약률 평균"} />
      </div>
      <div className="main-grid-agency margin-bottom2">
        <div className="content-box combine-left-government4">
          <div className="height-50">
            {medicationSelectListByNew.length > 0 ? (
              <Chart10 data={medicationSelectListByMonth} />
            ) : (
              <div className="no-data">
                <p>데이터가 없습니다.</p>
              </div>
            )}
          </div>
          <div>
            <table className="visit-data-table">
              <thead>
                <tr>
                  <th>년도</th>
                  <th>총계</th>
                  <th>1월</th>
                  <th>2월</th>
                  <th>3월</th>
                  <th>4월</th>
                  <th>5월</th>
                  <th>6월</th>
                  <th>7월</th>
                  <th>8월</th>
                  <th>9월</th>
                  <th>10월</th>
                  <th>11월</th>
                  <th>12월</th>
                </tr>
              </thead>
              <tbody>
                {medicationSelectListByYear.length > 0 ? (
                  medicationSelectListByYear.map((item, idx) => {
                    return (
                      <tr>
                        <td>{item["year"]}</td>
                        <td>
                          {item["average"] == "-" ? "-" : item["average"] + "%"}
                        </td>
                        {CommonUtil.isEmpty(item["data"]) == false
                          ? item["data"].map((item1, idx1) => {
                              return (
                                <>
                                  <td>{item1 == "-" ? "-" : item1 + "%"}</td>
                                </>
                              );
                            })
                          : null}
                      </tr>
                    );
                  })
                ) : (
                  <tr>
                    <td colSpan={14}>데이터가 없습니다.</td>
                  </tr>
                )}
              </tbody>
            </table>
          </div>
        </div>
      </div>
      {/* <div className="flex-start margin-bottom2"><img src={medicinebox} alt="" /><TitleSmall title={"방문/전화 관리 리스트"} /></div>
      <div className="main-grid-agency margin-bottom2">
        <div className="content-box combine-left-government3 visitlist">
          <div className="margin-bottom2">
            <Calendar_agency />
          </div>
          <div className="margin-bottom2">
            <Table className="agency-visitlist" head={thead} contents={content} contentKey={key} />
          </div>
        </div>
      </div> */}
      <div className="main-grid-agency2">
        <div>
          <div className="flex-start margin-bottom2">
            <img src={medicinebox} alt="" />
            <TitleSmall title={"시니어 복약수 순위"} />
          </div>
          <div className="content-box combine-left-government3 visitlist margin-bottom2">
            {medicationSelectListByNew.length > 0 ? (
              <Chart8 data={medicationSelectListByNew} />
            ) : (
              <div className="no-data">
                <p>데이터가 없습니다.</p>
              </div>
            )}
          </div>
        </div>
        <div>
          <div className="flex-start margin-bottom2">
            <img src={medicinebox} alt="" />
            <TitleSmall title={"연령대별 통계"} />
          </div>
          <div className="content-box combine-left-government3 visitlist margin-bottom2">
            {seniorGenderData.length > 0 ? (
              <Chart7 data={seniorGenderData} />
            ) : (
              <div className="no-data">
                <p>데이터가 없습니다.</p>
              </div>
            )}
          </div>
        </div>
      </div>
      <div></div>
    </main>
  );
}