const POINT_SIZE = 5;
const UNMATCH_POINT_SIZE = 3;

// const getPendingColor = () => {
//   const { prediction } = usePendingPointsFilters();
//
//   const getValue = (multiply) => {
//     const difference = prediction[1] - prediction[0];
//     const value = prediction[0] + (difference * multiply);
//     return Math.floor(value);
//   }
//
//   return {
//     property: "prediction_current",
//     stops: [
//       [getValue(0), "#FDEBF0"],
//       [getValue(0.1), "#F8C7D8"],
//       [getValue(0.25), "#F398BC"],
//       [getValue(0.4), "#EE67A1"],
//       [getValue(0.55), "#B64490"],
//       [getValue(0.7), "#7E237E"],
//       [getValue(0.85), "#46016C"],
//     ],
//   };
// }

export const PENDING_COLOR = {
  property: "prediction_current",
  stops: [
    [160, "#FDEBF0"],
    [161, "#F8C7D8"],
    [186, "#F398BC"],
    [201, "#EE67A1"],
    [211, "#B64490"],
    [226, "#7E237E"],
    [251, "#46016C"],
  ],
};

export const CANCELLED_COLOR = "#A6A6A6";
export const APPROVE_COLOR = "#ff7d00";
export const WORKING_COLOR = "#006e01";
export const UNMATCHED_COLOR = "rgba(196,195,195,0.6)";
export const PVZ_COLOR = "#3f5be8";
export const OTHER_POSTAMATES_COLOR = "#26a2a2";

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

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

export const matchInitialPointLayer = getPointConfig();
export const unmatchInitialPointLayer = getPointConfig(
  UNMATCHED_COLOR,
  UNMATCH_POINT_SIZE
);
export const approvePointLayer = {
  ...getPointConfig(APPROVE_COLOR),
  paint: {
    ...getPointConfig(APPROVE_COLOR).paint,
    "circle-stroke-width": 1,
    "circle-stroke-color": "#252525",
  },
};

export const workingPointSymbolLayer = {
  type: "symbol",
  layout: {
    "icon-image": "logo",
    "icon-size": ["interpolate", ["linear"], ["zoom"], 3, 0, 9, 0.1, 13, 0.5],
  },
  paint: {
    "icon-color": "#E63941",
  },
};

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],
    },
  };
}

const workingBgColor = "#ffffff";
const workingBgSize = 16;
export const workingPointBackgroundLayer = {
  ...getPointConfig(workingBgColor, workingBgSize),
  paint: {
    ...getPointConfig(workingBgColor, workingBgSize).paint,
    "circle-stroke-width": 0.4,
    "circle-stroke-color": "#252525",
  },
};
export const cancelledPointLayer = {
  ...getPointConfig(CANCELLED_COLOR),
  paint: {
    ...getPointConfig(CANCELLED_COLOR).paint,
    "circle-stroke-width": 1,
    "circle-stroke-color": "#252525",
  },
};
export const pvzPointLayer = getPointConfig(PVZ_COLOR);
export const otherPostamatesLayer = getPointConfig(OTHER_POSTAMATES_COLOR);

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,
  },
};
