"use client";

import React, {useEffect, useState} from "react";

import FetchService from "./help/fetch-service";
import Donut from "./components/donut";
import DateInput from "./components/date-input";
import DataForm from "./components/bar-chart/form";
import BarChart from "./components/bar-chart/chart";

export default function Page() {
  const [donutValues, setDonutValues] = useState([]);
  const [chartData, setChartData] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const Loader = () => <div>Loading...</div>;

  const handleFormSubmit = async (formData) => {
    setIsLoading(true);
    const response = await fetch(`https://localhost/sales/bar-chart/${formData.startDate}/${formData.endDate}/${formData.granularity}?page=1`);
    const data = await response.json();
    console.log(data);
    setChartData(data);
    setIsLoading(false);
  };

  useEffect(() => {
    (async () => {
      const data = await FetchService.getDonutContent();
      const formattedData = data.map((x) => ({
        id: x.region,
        count: x.occurences
      }));
      setDonutValues(formattedData);
    })();
  }, []);

    return (
        <>
            <div className="card-container">
                <div className="card">
                    <DateInput/>
                    <Donut data={donutValues}/>
                </div>
                <div className="card">
                    <h3>Nombre des ventes par période</h3>
                    {isLoading && <Loader />}
                    <DataForm onSubmit={handleFormSubmit} />
                    <BarChart data={chartData} />
                </div>
            </div>
        </>
    );
}