const POINT_SIZE = 5;
const UNMATCH_POINT_SIZE = 3;

export const INITIAL_COLOR = "#CC2222";
export const CANCELLED_COLOR = "#CC2222";
export const APPROVE_COLOR = "#ff7d00";
export const WORKING_COLOR = "#006e01";
export const UNMATCHED_COLOR = "#b4b4b4";

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

const getPointConfig = (color = INITIAL_COLOR, size = POINT_SIZE) => {
  return {
    ...DEFAULT_POINT_CONFIG,
    paint: {
      ...DEFAULT_POINT_CONFIG.paint,
      "circle-color": color,
      "circle-radius": size,
    },
  };
};

export const matchInitialPointLayer = getPointConfig();
export const unmatchInitialPointLayer = getPointConfig(
  UNMATCHED_COLOR,
  UNMATCH_POINT_SIZE
);
export const approvePointLayer = getPointConfig(APPROVE_COLOR);
export const workingPointLayer = getPointConfig(WORKING_COLOR);
export const cancelledPointLayer = getPointConfig(CANCELLED_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,
  },
};
