import React, { useEffect, useState } from "react";
import Chart from "react-apexcharts";
import PropTypes from "prop-types";
import MkdSDK from "@/utils/MkdSDK";

const sdk = new MkdSDK();

const LineChart = ({ request, options = {}, series = [] }) => {
  const [option, setOption] = useState(options);
  const [serie, setSerie] = useState(series);

  useEffect(() => {
    if (request) {
      sdk
        .callRawAPI(request?.route, request?.payload ?? {}, request?.method)
        .then((res) => {
          setOption(Object.keys(res.model)), setSerie(Object.values(res.model));
        })
        .catch((err) => console.error(err));
    }
  }, []);
  return (
    <div className=" flex w-full items-center justify-center">
      <div className="">
        <div className="hidden lg:block">
          <Chart options={options} series={series} type="line" width="420" />
        </div>
        <div className="lg:hidden">
          <Chart options={options} series={series} type="line" width="355" />
        </div>
      </div>
    </div>
  );
};

LineChart.defaultProps = {
  options: { chart: { id: "" } },
  categories: [],
  series: [],
};

LineChart.propTypes = {
  options: PropTypes.shape({}),
  categories: PropTypes.shape([]),
  series: PropTypes.shape([]),
};

export default LineChart;
