import React, { useEffect } from "react";
import ApexCharts from "apexcharts";

const StatusChart = ({ projects }) => {

  const cancelledProjects = projects?.projects_with_issue || [];
  const pendingProjects = projects?.total_pending_projects || [];
  const completedProjects = projects?.total_completed_projects || [];

  // based on your api data
  const cancelledCount = cancelledProjects.length;
  const completedCount = completedProjects.length;
  const pendingCount = pendingProjects.length;

  useEffect(() => {

    const options = {
      series: [
        {
          name: "Cancelled Projects",
          data: [cancelledCount]
        },
        {
          name: "Completed Projects",
          data: [completedCount]
        },
        {
          name: "Ongoing Projects",
          data: [pendingCount]
        }
      ],

      chart: {
        height: 370,
        type: "bar",
        toolbar: { show: false }
      },
      plotOptions: {
        bar: {
          horizontal: false,
          columnWidth: "35%",
          endingShape: "rounded",
        },
      },
      dataLabels: {
        enabled: true
      },
      stroke: {
        show: true,
        width: 2,
        colors: ["transparent"]
      },
      xaxis: {
        categories: ["Projects"],
      },
      fill: {
        opacity: 1
      },
      colors: ["#ed5e5e", "#5cb85c", "#17a2b0"],
      yaxis: {
        title: {
          text: "Projects"
        }
      },
      tooltip: {
        y: {
          formatter: function (val) {
            return val + " Projects";
          }
        }
      }
    };

    const chart = new ApexCharts(
      document.querySelector("#customer_impression_charts"),
      options
    );

    chart.render();

    return () => {
      chart.destroy();
    };

  }, [cancelledCount, completedCount, pendingCount]);

  return (
    <>
      <div className="row">
        <div className="col-xl-12">
          <div className="card">
            <div className="card-header border-0 align-items-center d-flex">
              <h4 className="card-title mb-0 flex-grow-1">
                Projects Statistics
              </h4>
            </div>

            <div className="card-header p-0 border-0 bg-light-subtle">
              <div className="row g-0 text-center">

                {/* COMPLETED */}
                <div className="col-6 col-sm-4">
                  <div className="p-3 border border-dashed border-start-0">
                    <h5 className="mb-1">
                      {completedCount}
                    </h5>
                    <p className="text-muted mb-0">
                      Completed Projects
                    </p>
                  </div>
                </div>

                {/* ONGOING */}
                <div className="col-6 col-sm-4">
                  <div className="p-3 border border-dashed border-start-0">
                    <h5 className="mb-1">
                      {cancelledCount}
                    </h5>
                    <p className="text-muted mb-0">
                      Cancelled Projects
                    </p>
                  </div>
                </div>

                {/* PENDING */}
                <div className="col-6 col-sm-4">
                  <div className="p-3 border border-dashed border-start-0">
                    <h5 className="mb-1">
                      {pendingCount}
                    </h5>
                    <p className="text-muted mb-0">
                      Ongoing Projects
                    </p>
                  </div>
                </div>

              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="card-body p-0">
        <div className="w-100">
          <div
            id="customer_impression_charts"
            className="apex-charts"
            dir="ltr"
          />
        </div>
      </div>
    </>
  );
};

export default StatusChart;
