import React, { useState } from "react";
import { Col } from "react-bootstrap";
import { Bar } from "react-chartjs-2";
import { callUserInfo } from "../utils/CheckDB";
import { useEffect } from "react";
import axios from "axios";
import { routesClient } from "./../routesClient";

function ChartTemp() {
  const [temp, setTemp] = useState([]);

  useEffect(() => {
    callUserInfo().then((res) => {
      const outs = axios.get(routesClient.outsideLoc + res["loc_code"]);
      return outs.then((res) => {
        const outWeather = res.data.contents.weather_out;
        console.log(res.data.contents.weather_out);
        let i = 0;
        // setTemp(res.data.contents.weather_out[0].temp)
        const tempArray = [];
        for (i; i < 3; i++) {
          console.log(i);
          console.log(outWeather[i]);
          tempArray.push(outWeather[i].temp);
        }
        setTemp(tempArray);
      });
    });
  }, []);

  console.log(temp);

  const options = {
    legend: {
      display: true, // label 보이기 여부
    },
    scales: {
      yAxes: [
        {
          ticks: {
            min: 0, // y축 스케일에 대한 최소값 설정
            stepSize: 0.5, // y축 그리드 한 칸당 수치
          },
        },
      ],
    },

    // false : 사용자 정의 크기에 따라 그래프 크기가 결정됨.
    // true : 크기가 알아서 결정됨.
    maintainAspectRatio: false,
  };
  const data = {
    labels: ["1", "2", "3", "4", "5", "6", "77", "88", "99"],
    datasets: [
      {
        label: "온도",
        borderWidth: "2",
        data: temp,
        borderColor: [
          "rgba(75,192,192,1)",
          "rgba(75,192,192,1)",
          "rgba(75,192,192,1)",
          "rgba(75,192,192,1)",
          "rgba(75,192,192,1)",
          "rgba(75,192,192,1)",

          "rgba(191,191,191,1)",
          "rgba(191,191,191,1)",
          "rgba(191,191,191,1)",
        ],
        backgroundColor: [
          "rgba(75,192,192,0.4)",
          "rgba(75,192,192,0.4)",
          "rgba(75,192,192,0.4)",
          "rgba(75,192,192,0.4)",
          "rgba(75,192,192,0.4)",
          "rgba(75,192,192,0.4)",

          "rgba(191,191,191,0.4)",
          "rgba(191,191,191,0.4)",
          "rgba(191,191,191,0.4)",
        ],
      },
    ],
  };

  return (
    <Col id="chartTab">
      <Bar data={data} options={options} />
    </Col>
  );
}

export default ChartTemp;