import React, { useState, useEffect } from "react";
import { Card, CardText, CardBody } from "reactstrap";
import { Link } from "react-router-dom";
import moment from "moment";
import "moment/locale/fr";
import SimpleBarChart from "../Barchart";
import "./Causes.css";

function Causes(props) {
  const { activeTab } = props;
  const [datas, setDatas] = useState([
    { shop: "00h-8h", value: 250, color: "#A2AAC2" },
    { shop: "8h-12h", value: 420, color: "#A2AAC2" },
    { shop: "12h-16h", value: 500, color: "#A2AAC2" },
    { shop: "16h-20h", value: 80, color: "#A2AAC2" },
    { shop: "20h-00h", value: 80, color: "#A2AAC2" }
  ]);

  useEffect(() => {
    console.log("datas ", datas);
  }, [datas]);

  useEffect(() => {
    switch (activeTab) {
      case "days":
        setDatas([
          { shop: "00h-8h", value: 250, color: "#A2AAC2" },
          { shop: "8h-12h", value: 420, color: "#A2AAC2" },
          { shop: "12h-16h", value: 500, color: "#A2AAC2" },
          { shop: "16h-20h", value: 80, color: "#A2AAC2" },
          { shop: "20h-00h", value: 80, color: "#A2AAC2" }
        ]);
        break;
      case "weeks":
        setDatas([
          { shop: "Lundi", value: 250, color: "#A2AAC2" },
          { shop: "Mardi", value: 420, color: "#A2AAC2" },
          { shop: "Mercredi", value: 500, color: "#A2AAC2" },
          { shop: "Jeudi", value: 80, color: "#A2AAC2" },
          { shop: "Vendredi", value: 80, color: "#A2AAC2" },
          { shop: "Samedi", value: 80, color: "#A2AAC2" },
          { shop: "Dimanche", value: 80, color: "#A2AAC2" }
        ]);
        break;
      case "months":
        weekInMonth(new Date().getFullYear(), moment(new Date()).format("M"));
        break;
      case "years":
        setDatas([
          { shop: "Janvier", value: 250, color: "#A2AAC2" },
          { shop: "Février", value: 420, color: "#A2AAC2" },
          { shop: "Mars", value: 500, color: "#A2AAC2" },
          { shop: "Avril", value: 80, color: "#A2AAC2" },
          { shop: "Mai", value: 80, color: "#A2AAC2" },
          { shop: "Juin", value: 80, color: "#A2AAC2" },
          { shop: "Juillet", value: 80, color: "#A2AAC2" },
          { shop: "Août", value: 500, color: "#A2AAC2" },
          { shop: "Septembre", value: 80, color: "#A2AAC2" },
          { shop: "Octobre", value: 80, color: "#A2AAC2" },
          { shop: "Novembre", value: 80, color: "#A2AAC2" },
          { shop: "Décembre", value: 80, color: "#A2AAC2" }
        ]);
        break;
      default:
        setDatas([
          { shop: "00h-8h", value: 250, color: "#A2AAC2" },
          { shop: "8h-12h", value: 420, color: "#A2AAC2" },
          { shop: "12h-16h", value: 500, color: "#A2AAC2" },
          { shop: "16h-20h", value: 80, color: "#A2AAC2" },
          { shop: "20h-00h", value: 80, color: "#A2AAC2" }
        ]);
    }
  }, [activeTab]);

  return (
    <div className="Causes">
                <SimpleBarChart
                  h={400}
                  w={900}
                  data={datas}
                  defaultKeys={["shop", "value"]}
                />
    </div>
  );
}

export default Causes;