/**
 * The look-up between a filter's name and the CSS that produces it.
 *
 * Shared by the story composer and the post photo editor, so the two can't
 * drift apart on what "Clarendon" means.
 */
export type FilterId =
  | "normal" | "clarendon" | "gingham" | "moon" | "lark"
  | "reyes" | "juno" | "ludwig" | "aden" | "perpetua";

export const FILTERS: { id: FilterId; label: string; css: string }[] = [
  { id: "normal", label: "Normal", css: "none" },
  { id: "clarendon", label: "Clarendon", css: "contrast(1.2) saturate(1.35) brightness(1.05)" },
  { id: "gingham", label: "Gingham", css: "sepia(0.04) contrast(0.9) brightness(1.1) saturate(0.85)" },
  { id: "moon", label: "Moon", css: "grayscale(1) contrast(1.1) brightness(1.1)" },
  { id: "lark", label: "Lark", css: "saturate(1.15) contrast(0.9) brightness(1.1)" },
  { id: "reyes", label: "Reyes", css: "sepia(0.4) contrast(0.85) brightness(1.15) saturate(0.75)" },
  { id: "juno", label: "Juno", css: "saturate(1.4) contrast(1.1) sepia(0.15)" },
  { id: "ludwig", label: "Ludwig", css: "saturate(0.7) contrast(1.05) brightness(1.05)" },
  { id: "aden", label: "Aden", css: "sepia(0.2) contrast(0.9) brightness(1.2) saturate(0.85) hue-rotate(-10deg)" },
  { id: "perpetua", label: "Perpetua", css: "saturate(1.1) brightness(1.05) contrast(0.95) hue-rotate(5deg)" },
];

/** The CSS for a filter, or none when it isn't recognised. */
export function filterCss(id: string | null | undefined) {
  return FILTERS.find((f) => f.id === id)?.css ?? "none";
}