import { Line } from "react-chartjs-2";
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip as ChartTooltip,
  Legend, PointElement, LineElement, BarController,
} from 'chart.js';
import { useShap } from "../api/filters.js";
import { useMemo } from "react";
import { useDzkhFilters } from "../../stores/useDzkhFilters.js";

ChartJS.register(
  CategoryScale,
  BarController,
  PointElement,
  LineElement,
  LinearScale,
  BarElement,
  Title,
  ChartTooltip,
  Legend
);

const GRAPH_LABELS_MAP= {
  t_shap: "Air temperature",
  fi_remont1_shap: "Replacement of cold water risers",
  fi_remont2_shap: "Repair of internal cold water mains",
  fi_remont3_shap: "Replacement of hot water risers",
  fi_remont4_shap: "Repair of internal hot water mains",
  fi_remont5_shap: "Repair of sewer risers",
  fi_remont6_shap: "Repair of sewer outlets and collector pipelines",
  fi_remont7_shap: "Repair of internal heating systems (with riser replacement)",
  fi_remont8_shap: "Repair of heating mains",
  total_area_shap: "Total area",
  fi_is_block_shap: "Material - block",
  fi_is_brick_shap: "Material - brick",
  fi_is_panel_shap: "Material - panel",
  building_wear_shap: "Wear",
  fi_is_monolit_shap: "Material - monolithic",
  fi_energy_class_shap: "Energy efficiency class",
  fi_building_year_shap: "Year of construction",
  gvs_avg_heat_load_shap: "Average hot water heat load",
  heating_heat_load_shap: "Heating heat load",
  gvs_fact_heat_load_shap: "Actual hot water heat load",
  ventilation_heat_load_shap: "Ventilation heat load"
};
export const PointChart = ({ point }) => {
  const { data: shapData } = useShap(point.id);
  const {consumer_filter} = useDzkhFilters();

  const shap = useMemo(() => {
    if (!shapData) return null;
    if (!consumer_filter || !consumer_filter.key.includes("prob")) return shapData['prob1_35'];
    return shapData[`${consumer_filter.key}_35`];
  }, [shapData, consumer_filter]);

  if (!shapData || !shap) return "";

  const options = {
    indexAxis: 'y',
    elements: {
      bar: {
        borderWidth: 0,
        borderRadius: 5,
        pointStyle: 'circle'
      },
    },
    plugins: {
      legend: {
        display: false
      },
      tooltip: {
        displayColors: false,
        yAlign: "top",
      },
    },
    scales: {
      y: {
        stacked: true,
      },
      x: {
        title: {
          display: true,
          text: 'Contribution to forecast, %',
        },
        grid: {
          color: function(context) {
            if (context.tick.value === 0) {
              return "#000000";
            }

            return "#E5E5E5";
          },
        },
      }
    }
  };

  const labels = Object.keys(GRAPH_LABELS_MAP).sort((a, b) => {
    if (Math.abs(shap[a]) < Math.abs(shap[b])) return 1;
    else return -1;
  }).slice(0, 15);

  const data = {
    labels: labels.map((l) => GRAPH_LABELS_MAP[l]),
    datasets: [
      {
        data: labels.map((l) => shap ? shap[l] : 0),
        backgroundColor: labels.map((l) => shap[l]).map(v => v <= 0 ? '#278211' : '#CC2500'),
        hoverBackgroundColor: labels.map((l) => shap[l]).map(v => v <= 0 ? '#2DB20C' : '#F22C00'),
        type: 'bar',
        showLine: false,
      },
    ],
  };
  return <Line options={options} data={data} />
}
