import merge from "deepmerge";
import { renderTheme } from "./default.js";

export const colors = {
  background: "#333",
  backgroundActive: "#828282",
  backgroundInactive: "#4d4d4d",
  backgroundAlternate: "#555",
  color: "#7094db",
  colorActive: "#ecb1c5",
  colorInactive: "#7d98d4",
  colorAlternate: "#ecb1c5",
  shadowColor: "#222",
  borderColor: "#222",
  borderColorActive: "silver",
  borderColorInactive: "#7d98d4",
  spinnerShadow: "#444",
  spinnerHighlight: "#db7093",
  cardFoldHighlight: "#091225",
  cardFoldShadow: "#bdb19a",
  selectColor: "#7094db"
};

const mapRange = (l, i, min, max) => Math.round((max - min) * ((l - i) / l) + min);

export const darkTheme = merge(renderTheme(colors), {
  snakePart: {
    boxShadow: "1px 1px 2px #888 inset, -1px -1px 2px #222 inset",
    getColor(length, index, died) {
      const hue = 220;
      if (!died) {
        const saturation = mapRange(length, index, 20, 65);
        const brightness = 65;
        return `hsl(${hue}, ${saturation}%, ${brightness}%)`;
      }
      const saturation = 0;
      const brightness = mapRange(length, index, 70, 0);
      return `hsl(${hue}, ${saturation}%, ${brightness}%)`;
    }
  },
  stage: {
    cell: {
      boxShadow: "1px 1px 3px #191919 inset, -1px -1px 1px #777777 inset"
    }
  }
});

export default darkTheme;