import { useCallback } from 'react';
import getColor from "../../../utils/colors/getColor.js";
import getElectionPaletteColor from "../../../utils/colors/getElectionPaletteColor.js";

/**
 *
 * @param {Object} colors  // Colors palette object as returned by `Hooks/useMapColors`
 * @param {String} format  // The diplay format of the map. One of "dots", "geo" or "carto"
 * @returns
 */

const useGetMapFills = function useGetMapFills(colors, format) {
  return useCallback(({
    code
  }) => {
    const color = colors.fipsToPalette.get(code);
    const getPaletteColor = (palette, token) => {
      const paletteName = palette === 'fallback' ? 'other-party' : palette;
      return getColor(getElectionPaletteColor(paletteName, token));
    };
    if (!color && format === 'carto') {
      return {
        fill: 'white',
        stroke: 'white'
      };
    }
    if (!color) {
      return {
        fill: 'white',
        stroke: getColor('warmgray-30')
      };
    }
    if (color.statusIsUnclear) {
      return {
        fill: 'white',
        stroke: getColor('warmgray-100')
      };
    }
    if (color.status.outcome === 'winner') {
      return {
        fill: getPaletteColor(color.palette, 'main'),
        stroke: getPaletteColor(color.palette, 'bgInverse')
      };
    }
    if (color.status.outcome === 'runoff') {
      return {
        fill: getColor('runoff'),
        stroke: getColor('yellow-90')
      };
    }
    return {
      fill: `url(#${color.palette}-leading)`,
      stroke: getPaletteColor(color.palette, 'bgInverse')
    };
  }, [colors, format]);
};
export default useGetMapFills;