"use client"
import React, { useState } from 'react'
import ReactECharts from "echarts-for-react";
import { useTranslations } from 'next-intl';
import { useRouter, useSearchParams } from 'next/navigation';
import { Spin } from 'antd';

const SalesChart = ({salesGraph}:{salesGraph:any}) => {
    const t = useTranslations();
    const searchParams = useSearchParams();
    const [timeframe, setTimeframe] = useState(searchParams.get("graph") || "year");
    const router = useRouter();

    const data :any = {
        xAxis: {
            type: "category",
            data:salesGraph?.original?.x,
        },
        yAxis: {
            type: "value",
        },
      series: [
        {
          name: salesGraph?.original?.datasets?.[0]?.label || "",
          type: "line",
          data: salesGraph?.original?.datasets?.[0]?.data || [],
          color: "#5B178A",
          seriesLayoutBy: 'row',
          smooth: true,
          showSymbol: false,
        },
        {
          name: salesGraph?.original?.datasets?.[1]?.label || "",
          type: "line",
          data: salesGraph?.original?.datasets?.[1]?.data || [],
          color: "#D8A7F6",
          smooth: true,
          showSymbol: false,
        },
      ],
      tooltip: {
        trigger: "axis",
        formatter: `{b} : {c} ${t("Text.IQ")}`,
      },
      legend: {
        data: [salesGraph?.original?.datasets?.[0]?.label || "" , salesGraph?.original?.datasets?.[1]?.label|| ""],
      },
    };

    const dateButtons = [ 
      {
        label:t("statistics.yearly"),
        value:"year"
      },
      {
        label:t("statistics.monthly"),
        value:"month"
      },
      {
        label:t("statistics.weekly"),
        value:"week"
      },
      {
        label:t("statistics.daily"),
        value:"today"
      }

    ]

    const handleChangeDate = (date:string)=>{
      const params = new URLSearchParams(searchParams.toString());
      params.set("graph", date);
      router.push(`?${params.toString()}`);
      setTimeframe(date)
    }
  
    return (
      <div className="col-span-2 app-card-wrapper">
        <div className='relative'>
          <div className="flex justify-between items-center mb-4">
              <h3 className="text-lg font-bold">{t("statistics.sales")}</h3>
              <div className="flex items-center">
                {dateButtons.map((item,index) => (
                  <button
                    key={`date-btn-${index}`}
                    // variant={timeframe === label ? "default" : "outline"}
                    onClick={() => handleChangeDate(item?.value)}
                    className={`
                      text-[10px] md:text-xs px-2 py-0.5 md:px-3 md:py-1.5 bg-greynormal border border-platinum 
                      first:rounded-s-full last:rounded-e-full ${timeframe == item.value ? "!bg-white":""}`}
                    >
                    {item.label}
                  </button>
                ))}
              </div>
          </div>
          <ReactECharts option={data} style={{ height: "426px" }} />
        </div>
      </div>
    );
  };

export default SalesChart