const POINT_SIZE = 6;

export const CONSUMER_COLOR = {
  stops: [
    [0.05, "#fff700"],
    [0.20, "#ffda00"],
    [0.35, "#ffbc00"],
    [0.5, "#ff9d00"],
    [0.65, "#ff7a00"],
    [0.8, "#ff5200"],
    [0.95, "#ff0000"],
  ],
};

export const CONSUMER_COLOR_COOLING = {
  stops: [
    [2.8, "#ff0000"],
    [3.7, "#ff5200"],
    [4.6, "#ff7a00"],
    [5.5, "#ff9d00"],
    [6.4, "#ffbc00"],
    [7.3, "#ffda00"],
    [8.2, "#fff700"],
  ],
};



export const DISPATCHER_COLOR = "#078500";
export const SOURCE_COLOR = {
  stops: [
    [0.05, "#fd99ff"],
    [0.20, "#da7ee1"],
    [0.35, "#b964c3"],
    [0.5, "#984ba6"],
    [0.65, "#793389"],
    [0.8, "#5a1a6e"],
    [0.95, "#3d0053"],
  ],
};

const DEFAULT_POINT_CONFIG = {
  type: "circle",
  paint: {
    "circle-stroke-width": 0.1,
    "circle-stroke-color": "#262626",
    "circle-opacity": 0.8,
  },
};

const getPointConfig = (color = 'grey', size = POINT_SIZE) => {
  return {
    ...DEFAULT_POINT_CONFIG,
    paint: {
      ...DEFAULT_POINT_CONFIG.paint,
      "circle-color": color,
      "circle-radius": [
        "interpolate",
        ["linear"],
        ["zoom"],
        3,
        0,
        10,
        1,
        13,
        size,
      ],
    },
  };
};

export const getPointSymbolLayer = (image) => {
  return {
    type: "symbol",
    layout: {
      "icon-image": [
        'coalesce',
        ['image', image],
        ['image', 'defaultIcon']
      ],
      "icon-size": ["interpolate", ["linear"], ["zoom"], 3, 0, 9, 0.1, 13, 0.5],
    },
  };
}

export const consumerPointLayer = {
  ...getPointConfig(),
  paint: {
    ...getPointConfig().paint,
  },
};

export const dispatcherPointLayer = {
  ...getPointSymbolLayer("dispatcherIcon"),
};

export const sourcePointLayer = {
  ...getPointConfig('grey', 10),
  paint: {
    ...getPointConfig('grey', 10).paint,
  },
};

const regionColor = "#676767";

export const aoLayer = {
  id: "ao",
  type: "line",
  source: "ao",
  "source-layer": "public.service_ao",
  layout: {
    "line-join": "round",
    "line-cap": "round",
  },
  paint: {
    "line-color": regionColor,
    "line-width": 1.5,
    "line-opacity": 0.8,
  },
};

export const rayonLayer = {
  id: "rayon",
  type: "line",
  source: "rayon",
  "source-layer": "public.service_rayon",
  layout: {
    "line-join": "round",
    "line-cap": "round",
  },
  paint: {
    "line-color": regionColor,
    "line-width": 0.5,
    "line-opacity": 0.8,
  },
};

export const selectedRegionLayer = {
  id: "selected-region",
  type: "line",
  source: "selected-region",
  layout: {
    "line-join": "round",
    "line-cap": "round",
  },
  paint: {
    "line-color": "#CC2222",
    "line-width": 4,
  },
};
