import React from "react";
import ContentTitle from "../../../component/ContentTitle.jsx";
import SubTitle from "../../../component/SubTitle.jsx";
import Button from "../../../component/Button.jsx";
import Chart3 from "../../../component/chart/Chart3.jsx";
import LineColor from "./../../../component/chart/LineColor.jsx";
import Donut2 from "./../../../component/chart/Donut2.jsx";
import ToggleButton from "../../../component/ToggleButton.jsx";
import Chart from './../../../component/chart/Chart.jsx';

export default function MedicineStatistics() {
  return (
    <main>
      <div className="content-wrap">
        <ContentTitle contentTitle={"복약율 통계"} />
        <div className="board-wrap" style={{ height: "calc(100% - 60px)" }}>
          <div className="statistics-grid" style={{ height: "100%" }}>
            <div>
              <SubTitle
                className="margin-bottom"
                explanation={"토탈 복약율 통계"}
                color={"#333333"}
              />
              <div
                style={{
                  border: "1px solid #eeeeee",
                  borderRadius: "0.5rem",
                  padding: "1rem",
                  height: "calc(100% - 47px)",
                }}
              >
                <div className="flex-end">
                  <div className="flex flex30">
                    <input type="date" name="" id="" />
                  </div>
                  <div className="flex10">
                    <Button className={"green-btn"} btnName={"검색"} />
                  </div>
                </div>
                <Donut2 />
              </div>
            </div>
            <div>
              <div className="flex">
                <SubTitle
                  className="margin-bottom"
                  explanation={"나이대별 복약율 통계"}
                  color={"#333333"}
                />
              </div>
              <div
                style={{
                  border: "1px solid #eeeeee",
                  borderRadius: "0.5rem",
                  padding: "1rem",
                  height: "calc(100% - 47px)",
                }}
              >
                <Chart3 />
              </div>
            </div>
            <div>
              <div className="flex">
                <SubTitle
                  className="margin-bottom"
                  explanation={"주별, 월별 복약율 통계"}
                  color={"#333333"}
                />
                <ToggleButton
                  btnName1={"주별"}
                  btnName2={"월별"}
                />
              </div>
              <div
                style={{
                  border: "1px solid #eeeeee",
                  borderRadius: "0.5rem",
                  padding: "1rem",
                  height: "calc(100% - 47px)",
                }}
              >
                <div className="flex-end">
                  <select name="" id="">
                    <option value="">1월</option>
                    <option value="">2월</option>
                    <option value="">3월</option>
                    <option value="">4월</option>
                    <option value="">5월</option>
                    <option value="">6월</option>
                    <option value="">7월</option>
                    <option value="">8월</option>
                    <option value="">9월</option>
                    <option value="">10월</option>
                    <option value="">11월</option>
                    <option value="">12월</option>
                  </select>
                </div>
                <Chart />
              </div>
            </div>
            <div>
              <div className="flex">
                <SubTitle
                  className="margin-bottom"
                  explanation={"분기별 년별 복약율 통계"}
                  color={"#333333"}
                />
                <ToggleButton
                  btnName1={"분기별"}
                  btnName2={"년별"}
                />
              </div>

              <div
                style={{
                  border: "1px solid #eeeeee",
                  borderRadius: "0.5rem",
                  padding: "1rem",
                  height: "calc(100% - 47px)",
                }}
              >
                <div className="flex-end">
                  <select name="" id="">
                    <option value="">2022</option>
                    <option value="">2023</option>
                  </select>
                </div>
                <LineColor />
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  );
}