/** @odoo-module */

import { registry } from "@web/core/registry"
import { loadJS } from "@web/core/assets"
import { Component,onWillUpdateProps,onWillDestroy,onRendered} from '@odoo/owl';
const { onWillStart, useRef, onMounted , useState} = owl  //Component,
//import { OwlSalesDashboard } from "../sales_dashboard"
//import Chart from 'chart.js/auto'; // Ensure Chart.js is available

export class ChartRenderer extends Component {

    setup(){

        this.chartRef = useRef("chart");    
        this.state = useState({
          label: {
            value:[0,0,0]
          },data: {
            
          }
        });

        onMounted(()=>this.renderChart());
        
        onWillStart(async ()=>{
            await loadJS("https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.min.js")
            //await loadJS("https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js")
            //await this.getLabelsFromAnotherClass(['Total', 'Open', 'Close'])
        });

        onWillUpdateProps(nextProps => {
          // alert(nextProps.value+" DDDD "+this.props.value);
          // This method will be called when props change
          //alert(nextProps['data-labels']+" DD "+this.props['data-labels']);
          if (nextProps.value !== this.props.value) {
              this.props.value = nextProps.value;
          }

          if(nextProps['data-labels']!==this.props['data-labels']){
            this.props['data-labels'] = nextProps['data-labels'];
          }
          
          this.renderChart();
          
        }); 

        onWillDestroy(() => {
          // do some cleanup
        });

        
    }
  
        /*getLabelsFromAnotherClass = async (labels) => {
          //alert(" LLLL "+labels);
          console.log(labels);
          return labels;
        }*/

      async renderChart(){ 
        //alert(1);
        if(this.chart) {
           this.chart.destroy(); // Destroy the existing chart instance
        }
        //alert(" DD "+this.getLabelsFromAnotherClass());
        //console.log(getLabelsFromAnotherClass());
        //const labels = ['Fabrication', 'Accessories', 'Active Components','Passive Components','Metal','Cables & Connectors']; // Fallback to default labels
        //console.log("labels1",this.props['data-labels'])
          //alert(this.props.label); 
          //alert(" DD "+this.props['data-labels']);
        this.chart = new Chart(this.chartRef.el,
        { 
          type: this.props.type,
          data: {
            labels: this.props['data-labels'],
              datasets: [
              {
                label: '', //this.props.label
                data: this.props.value,
                hoverOffset: 4
              }
            ]
          },
          options: {
            responsive: true,
            plugins: {
              legend: {
                position: 'bottom',
              },
              title: {
                display: true,
                text: this.props.title,
                position: 'bottom',
              }
            }
          },
        }
      );
    }
}

ChartRenderer.template = "owl.ChartRenderer"