import React from "react";
import { useAuth } from "../../hooks";
import { useEffect } from "react";
import { getState } from "../../api";
import { useState } from "react";
import Chart from "react-apexcharts";
import "./home.scss";
import { Link } from "react-router-dom";
import { MagnifyingGlass } from "react-loader-spinner";

export const Home = () => {
  const { user } = useAuth();
  const [dataset, setDataset] = useState(null);
  const [generalStat, setGeneralStat] = useState(null);
  const [roomsStats, setRoomsState] = useState(null);
  const [isLoad, setIsLoad] = useState(true);

  useEffect(() => {
    getState().then((res) => {
      try {
        setIsLoad(false);
        console.log(res);
        setDataset(res);
        setupRoomsStats(res.rooms);
        setupGlobalStat({ years: res.years, global: res.global });
      } catch (err) {
        console.error(err);
      }
    });
  }, []);

  const setupRoomsStats = (rooms) => {
    setRoomsState(
      Object.values(rooms).sort((a, b) => b.room_price - a.room_price),
    );
  };

  const setupGlobalStat = (data) => {
    const stats = {
      options: {
        chart: {
          id: "",
        },
        xaxis: {
          categories: [],
        },
        stroke: {
          curve: "smooth",
        },
      },
      series: [
        {
          name: "",
          type: "line",
          data: [],
          color: "#7b6a9c",
        },
      ],
    };

    for (let i in data.years) {
      if (data.years[i] === 0) {
        continue;
      }

      stats.options.xaxis.categories.push(i);
      stats.series[0].data.push(data.years[i]);
    }

    const component = (
      <Chart options={stats.options} series={stats.series} width="500" />
    );

    setGeneralStat(component);
  };

  return (
    <div id="home-container">
      {user && (
        <div id="home-title">
          <h3 id="title">Bonjour {user.user.username} !</h3>
        </div>
      )}

      <MagnifyingGlass
        visible={isLoad}
        height="100"
        width="100"
        ariaLabel="magnifying-glass-loading"
        wrapperStyle={{}}
        wrapperClass="magnifying-glass-wrapper"
        glassColor="#ffffff"
        color="#7B6A9C"
      />

      {dataset ? (
        <div id="stats-container">
          <div className="stats">
            <div className="header">
              <h3 className="header-title">Statistique general</h3>
            </div>

            {generalStat ? generalStat : null}

            <div id="others-container">
              <div className="others">
                <div className="others-label">Moyenne de vos depenses</div>
                <div className="others-value">
                  {dataset.global.average_price}e
                </div>
              </div>

              <div className="others">
                <div className="others-label">Nombre total d'objet</div>
                <div className="others-value">
                  {dataset.global.items_count}e
                </div>
              </div>

              <div className="others">
                <div className="others-label">Nombre de piece</div>
                <div className="others-value">{dataset.global.rooms_count}</div>
              </div>

              <div className="others">
                <div className="others-label">Prix total</div>
                <div className="others-value">
                  {dataset.global.total_price}e
                </div>
              </div>

              <div className="others">
                <div className="others-label">Piece la plus cher</div>
                <div className="others-value">
                  {dataset.global.most_expensive_room.name} (
                  {dataset.global.most_expensive_room.count}e)
                </div>
              </div>

              <div className="others">
                <div className="others-label">Piece avec le plus d'objet</div>
                <div className="others-value">
                  {dataset.global.most_item_room.name} (
                  {dataset.global.most_item_room.count}).
                </div>
              </div>

              <div className="others">
                <div className="others-label">Piece avec le plus d'objet</div>
                <div className="others-value">
                  {dataset.global.most_item_room.name} (
                  {dataset.global.most_item_room.count}).
                </div>
              </div>
            </div>
          </div>

          <div className="stats">
            <div className="header">
              <h3 className="header-title">Pieces</h3>
            </div>

            <div id="rooms-container">
              {roomsStats.length >= 1
                ? roomsStats.map((r, i) => (
                    <div className="rooms" key={i}>
                      <span>- </span>
                      <Link to={`/room/${r._id}`}>{r.name}</Link>

                      <span>
                        {" "}
                        contient <b>{r.items_count}</b> objet(s) pour une valeur
                        total de <b>{r.room_price}e</b>{" "}
                      </span>
                    </div>
                  ))
                : null}
            </div>
          </div>
        </div>
      ) : null}
    </div>
  );
};