"use client"

import React, { useEffect, useState } from "react"
import { Chart as ChartJS, TimeScale, LinearScale, CategoryScale, BarElement, PointElement, Tooltip, Legend, ChartOptions } from "chart.js"
import "chartjs-adapter-date-fns"
import { Bar } from "react-chartjs-2"

ChartJS.register(TimeScale, LinearScale, CategoryScale, BarElement, PointElement, Tooltip, Legend)

interface IProps {
  labels?: any
  data?: Array<number>
  data1?: Array<number>
  name: string
  name1: string
}

const addLabelsPlugin = {
  id: `addLabelsPluginBarChart-${new Date().getTime()}`,

  afterDatasetsDraw(chart: any, args: any, options: any) {
    const {
      ctx,
      scales: { x, y },
    } = chart

    chart.data.datasets.forEach((dataset: any, datasetIndex: number) => {
      ctx.save()
      ctx.fillStyle = dataset.borderColor

      dataset.data.forEach((value: any, index: number) => {
        const bar = chart.getDatasetMeta(datasetIndex).data[index]
        const xPosition = bar.x
        const yPosition = bar.y

        ctx.beginPath()
        ctx.arc(xPosition, yPosition +2, 4, 0, 2 * Math.PI)
        ctx.fillStyle = dataset?.backgroundColor
        ctx.fill()
        ctx.closePath()
      })

      ctx.restore()
    })
  },
}

const BarChart = ({ data, name, labels, data1, name1 }: IProps) => {
  const [dataChart, setDataChart] = useState<any>({
    labels: [],
    datasets: [
      {
        label: "data",
        data: [],
        backgroundColor: "#DB9A1D",
        borderWidth: 0,
        barPercentage: 0.1,
        categoryPercentage: 0.5,
      },
      {
        label: "data1",
        data: [],
        backgroundColor: "#000",
        borderWidth: 0,
        barPercentage: 0.1,
        categoryPercentage: 0.5,
      },
    ],
  })

  const options: ChartOptions<any> = {
    responsive: true,
    maintainAspectRatio: false,
    stacked: false,
    plugins: {
      legend: {
        display: false,
      },
      tooltip: {
        enabled: true,
      },
    },
    barPercentage: 90,
    scales: {
      x: {
        // type: "time",
        // time: {
        //   unit: "day",
        //   displayFormats: {
        //     day: "dd MMM",
        //   },
        //   tooltipFormat: "dd MMM yyyy",
        // },
        grid: {
          drawOnChartArea: false,
          drawTicks: false,
          color: "#F9FAFC",
        },
        ticks: {
          color: "#374151",
          padding: 10,
          align: "center",
          source: "data",
        },
      },
      y: {
        border: {
          display: false,
        },
        beginAtZero: true,
        grid: {
          color: "#E5E7EB",
          drawBorder: false,
          drawTicks: false,
        },
        ticks: {
          color: "#374151",
          padding: 20,
        },
        type: "linear",
        grace: "10%",
      },
    },
  }

  useEffect(() => {
    if (labels && data) {
      const newData = Object.assign({}, dataChart)
      newData.labels = labels
      newData.datasets[0].data = data
      newData.datasets[0].label = name

      newData.datasets[1].data = data1
      newData.datasets[1].label = name1
      setDataChart(newData)
    }
  }, [labels, data])

  return (
    <div className="bg-[var(--secondary-10)] py-4 px-2 lg:px-3 xl:px-4">
      <div className="flex items-center justify-between mb-1 pl-2 pr-4">
        <p className="font-bold lg:text-base xl:text-lg pr-4 md:pr-0">{`${name} & ${name1}`}</p>
        <div className="md:flex items-center">
          <p className="flex items-center mr-3">
            <span className="bg-[var(--primary--70)] w-2.5 h-[2px] rounded inline-block mr-2 relative after:content-[''] after:w-2 after:h-2 after:bg-[var(--primary--70)] after:rounded-full after:absolute after:top-1/2 after:-translate-y-1/2 after:right-[-6px]"></span>
            <span className="text-xs">{name}</span>
          </p>
          <p className="flex items-center">
            <span className="bg-[var(--secondary-90)] w-2.5 h-[2px] rounded inline-block mr-2 relative after:content-[''] after:w-2 after:h-2 after:bg-[var(--secondary-90)] after:rounded-full after:absolute after:top-1/2 after:-translate-y-1/2 after:right-[-6px]"></span>
            <span className="text-xs">{name1}</span>
          </p>
        </div>
      </div>
      <div className="rounded overflow-x-auto">
        <div
          className="min-w-fit"
          style={{
            width: `${labels?.length * 50}px`,
          }}>
          <Bar
            options={options}
            data={dataChart}
            redraw={true}
            plugins={[addLabelsPlugin]}
          />
        </div>
      </div>
    </div>
  )
}

export default BarChart