import {Layer} from "react-map-gl";
import {useLayersVisibility} from "../../stores/useLayersVisibility.js";
import {useRegionFilterExpression} from "../../Map/Layers/useRegionFilterExpression.js";
import { CONSUMER_COLOR, CONSUMER_COLOR_COOLING, consumerPointLayer } from "./layers-config.js";
import {LAYER_IDS} from "../constants.js";
import {useDzkhFilters} from "../../stores/useDzkhFilters.js";
import { useConsumerLayerFilterExpression } from "./useConsumerLayerFilterExpression.js";
import {useSimulateAccident} from "../../stores/useSimulateAccident.js";
import {useWeatherFilter} from "../WeatherSlider/useWeatherFilter.js";
import {tempMapper} from "../../config.js";
import { useMemo } from "react";
import { useGetDzkhFiltersRange } from "../api/filters.js";

const typeExpression = ["==", ["get", "point_type"], LAYER_IDS.consumer];

export const ConsumerLayer = () => {
  const { isVisible } = useLayersVisibility();
  const {
    filters: { region },
    consumer_filter
  } = useDzkhFilters();
  const regionFilterExpression = useRegionFilterExpression(region);
  const filterExpression = useConsumerLayerFilterExpression();
  const { selectedSourceConfig } = useSimulateAccident();
  const { value: temp } = useWeatherFilter();

  const key = useMemo(() => {
    return consumer_filter?.key;
  }, [consumer_filter?.key]);

  const filterKey = useMemo(() => {
    if (!!key) return `${key}_${tempMapper[temp]}`;
    return undefined;
  }, [key, temp]);

  const {data, isLoading: isRangeLoading} = useGetDzkhFiltersRange(filterKey);

  const range = useMemo(() => {
    return data?.range || [0, 0]
  }, [data?.range]);

  const getFilter = () => {
    const result = ["all", typeExpression, ...filterExpression];
    if (regionFilterExpression) {
      result.push(regionFilterExpression)
    }

    if (selectedSourceConfig.sourceId) {
      result.push(["==", ["get", "tp_number"], selectedSourceConfig.sourceId])
    }
    return result
  };

  const propToColor = consumer_filter?.key ? `${consumer_filter.key}_${tempMapper[temp]}` : null;

  const isCooling = useMemo(() => {
    return consumer_filter && consumer_filter.key.includes('cooling')
  }, [consumer_filter]);

  const colorStops = useMemo(() => {
    const min = range[0];
    const max = range[1];
    const step = (max - min) / 8;
    if (isCooling) return [].concat(CONSUMER_COLOR.stops).reverse().map((c, i) => {
      return [min + i * step, c[1]];
    })
    return CONSUMER_COLOR.stops.map((c, i) => {
      return [min + i * step, c[1]];
    })

  }, [range]);

  const paintConfig = propToColor ? {
    ...consumerPointLayer.paint,
    "circle-color": {
      property: propToColor,
      stops: colorStops
    }
  } : consumerPointLayer.paint

  return (
    <>
      <Layer
        {...consumerPointLayer}
        id={LAYER_IDS.consumer}
        source={"points"}
        source-layer={"public.data"}
        layout={{
          visibility: isVisible[LAYER_IDS.consumer] ? "visible" : "none",
        }}
        filter={getFilter()}
        paint={paintConfig}
      />
    </>
  );
};
