export const PALETTE_SHADE_STEPS = ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900", "950"] as const;

export type PaletteShadeStep = (typeof PALETTE_SHADE_STEPS)[number];

export const TAILWIND_COLOR_PALETTE = [
  {
    name: "Red",
    shades: {
      "50": "#fef2f2",
      "100": "#fee2e2",
      "200": "#fecaca",
      "300": "#fca5a5",
      "400": "#f87171",
      "500": "#ef4444",
      "600": "#dc2626",
      "700": "#b91c1c",
      "800": "#991b1b",
      "900": "#7f1d1d",
      "950": "#450a0a",
    },
  },
  {
    name: "Orange",
    shades: {
      "50": "#fff7ed",
      "100": "#ffedd5",
      "200": "#fed7aa",
      "300": "#fdba74",
      "400": "#fb923c",
      "500": "#f97316",
      "600": "#ea580c",
      "700": "#c2410c",
      "800": "#9a3412",
      "900": "#7c2d12",
      "950": "#431407",
    },
  },
  {
    name: "Amber",
    shades: {
      "50": "#fffbeb",
      "100": "#fef3c7",
      "200": "#fde68a",
      "300": "#fcd34d",
      "400": "#fbbf24",
      "500": "#f59e0b",
      "600": "#d97706",
      "700": "#b45309",
      "800": "#92400e",
      "900": "#78350f",
      "950": "#451a03",
    },
  },
  {
    name: "Yellow",
    shades: {
      "50": "#fefce8",
      "100": "#fef9c3",
      "200": "#fef08a",
      "300": "#fde047",
      "400": "#facc15",
      "500": "#eab308",
      "600": "#ca8a04",
      "700": "#a16207",
      "800": "#854d0e",
      "900": "#713f12",
      "950": "#422006",
    },
  },
  {
    name: "Lime",
    shades: {
      "50": "#f7fee7",
      "100": "#ecfccb",
      "200": "#d9f99d",
      "300": "#bef264",
      "400": "#a3e635",
      "500": "#84cc16",
      "600": "#65a30d",
      "700": "#4d7c0f",
      "800": "#3f6212",
      "900": "#365314",
      "950": "#1a2e05",
    },
  },
  {
    name: "Green",
    shades: {
      "50": "#f0fdf4",
      "100": "#dcfce7",
      "200": "#bbf7d0",
      "300": "#86efac",
      "400": "#4ade80",
      "500": "#22c55e",
      "600": "#16a34a",
      "700": "#15803d",
      "800": "#166534",
      "900": "#14532d",
      "950": "#052e16",
    },
  },
  {
    name: "Emerald",
    shades: {
      "50": "#ecfdf5",
      "100": "#d1fae5",
      "200": "#a7f3d0",
      "300": "#6ee7b7",
      "400": "#34d399",
      "500": "#10b981",
      "600": "#059669",
      "700": "#047857",
      "800": "#065f46",
      "900": "#064e3b",
      "950": "#022c22",
    },
  },
  {
    name: "Teal",
    shades: {
      "50": "#f0fdfa",
      "100": "#ccfbf1",
      "200": "#99f6e4",
      "300": "#5eead4",
      "400": "#2dd4bf",
      "500": "#14b8a6",
      "600": "#0d9488",
      "700": "#0f766e",
      "800": "#115e59",
      "900": "#134e4a",
      "950": "#042f2e",
    },
  },
  {
    name: "Cyan",
    shades: {
      "50": "#ecfeff",
      "100": "#cffafe",
      "200": "#a5f3fc",
      "300": "#67e8f9",
      "400": "#22d3ee",
      "500": "#06b6d4",
      "600": "#0891b2",
      "700": "#0e7490",
      "800": "#155e75",
      "900": "#164e63",
      "950": "#083344",
    },
  },
  {
    name: "Sky",
    shades: {
      "50": "#f0f9ff",
      "100": "#e0f2fe",
      "200": "#bae6fd",
      "300": "#7dd3fc",
      "400": "#38bdf8",
      "500": "#0ea5e9",
      "600": "#0284c7",
      "700": "#0369a1",
      "800": "#075985",
      "900": "#0c4a6e",
      "950": "#082f49",
    },
  },
  {
    name: "Blue",
    shades: {
      "50": "#eff6ff",
      "100": "#dbeafe",
      "200": "#bfdbfe",
      "300": "#93c5fd",
      "400": "#60a5fa",
      "500": "#3b82f6",
      "600": "#2563eb",
      "700": "#1d4ed8",
      "800": "#1e40af",
      "900": "#1e3a8a",
      "950": "#172554",
    },
  },
  {
    name: "Indigo",
    shades: {
      "50": "#eef2ff",
      "100": "#e0e7ff",
      "200": "#c7d2fe",
      "300": "#a5b4fc",
      "400": "#818cf8",
      "500": "#6366f1",
      "600": "#4f46e5",
      "700": "#4338ca",
      "800": "#3730a3",
      "900": "#312e81",
      "950": "#1e1b4b",
    },
  },
  {
    name: "Violet",
    shades: {
      "50": "#f5f3ff",
      "100": "#ede9fe",
      "200": "#ddd6fe",
      "300": "#c4b5fd",
      "400": "#a78bfa",
      "500": "#8b5cf6",
      "600": "#7c3aed",
      "700": "#6d28d9",
      "800": "#5b21b6",
      "900": "#4c1d95",
      "950": "#2e1065",
    },
  },
  {
    name: "Purple",
    shades: {
      "50": "#faf5ff",
      "100": "#f3e8ff",
      "200": "#e9d5ff",
      "300": "#d8b4fe",
      "400": "#c084fc",
      "500": "#a855f7",
      "600": "#9333ea",
      "700": "#7e22ce",
      "800": "#6b21a8",
      "900": "#581c87",
      "950": "#3b0764",
    },
  },
  {
    name: "Fuchsia",
    shades: {
      "50": "#fdf4ff",
      "100": "#fae8ff",
      "200": "#f5d0fe",
      "300": "#f0abfc",
      "400": "#e879f9",
      "500": "#d946ef",
      "600": "#c026d3",
      "700": "#a21caf",
      "800": "#86198f",
      "900": "#701a75",
      "950": "#4a044e",
    },
  },
  {
    name: "Pink",
    shades: {
      "50": "#fdf2f8",
      "100": "#fce7f3",
      "200": "#fbcfe8",
      "300": "#f9a8d4",
      "400": "#f472b6",
      "500": "#ec4899",
      "600": "#db2777",
      "700": "#be185d",
      "800": "#9d174d",
      "900": "#831843",
      "950": "#500724",
    },
  },
  {
    name: "Rose",
    shades: {
      "50": "#fff1f2",
      "100": "#ffe4e6",
      "200": "#fecdd3",
      "300": "#fda4af",
      "400": "#fb7185",
      "500": "#f43f5e",
      "600": "#e11d48",
      "700": "#be123c",
      "800": "#9f1239",
      "900": "#881337",
      "950": "#4c0519",
    },
  },
  {
    name: "Slate",
    shades: {
      "50": "#f8fafc",
      "100": "#f1f5f9",
      "200": "#e2e8f0",
      "300": "#cbd5e1",
      "400": "#94a3b8",
      "500": "#64748b",
      "600": "#475569",
      "700": "#334155",
      "800": "#1e293b",
      "900": "#0f172a",
      "950": "#020617",
    },
  },
  {
    name: "Gray",
    shades: {
      "50": "#f9fafb",
      "100": "#f3f4f6",
      "200": "#e5e7eb",
      "300": "#d1d5db",
      "400": "#9ca3af",
      "500": "#6b7280",
      "600": "#4b5563",
      "700": "#374151",
      "800": "#1f2937",
      "900": "#111827",
      "950": "#030712",
    },
  },
  {
    name: "Zinc",
    shades: {
      "50": "#fafafa",
      "100": "#f4f4f5",
      "200": "#e4e4e7",
      "300": "#d4d4d8",
      "400": "#a1a1aa",
      "500": "#71717a",
      "600": "#52525b",
      "700": "#3f3f46",
      "800": "#27272a",
      "900": "#18181b",
      "950": "#09090b",
    },
  },
  {
    name: "Neutral",
    shades: {
      "50": "#fafafa",
      "100": "#f5f5f5",
      "200": "#e5e5e5",
      "300": "#d4d4d4",
      "400": "#a3a3a3",
      "500": "#737373",
      "600": "#525252",
      "700": "#404040",
      "800": "#262626",
      "900": "#171717",
      "950": "#0a0a0a",
    },
  },
  {
    name: "Stone",
    shades: {
      "50": "#fafaf9",
      "100": "#f5f5f4",
      "200": "#e7e5e4",
      "300": "#d6d3d1",
      "400": "#a8a29e",
      "500": "#78716c",
      "600": "#57534e",
      "700": "#44403c",
      "800": "#292524",
      "900": "#1c1917",
      "950": "#0c0a09",
    },
  },
  {
    name: "Mauve",
    shades: {
      "50": "#f7f4f8",
      "100": "#ece8ee",
      "200": "#ddd5e0",
      "300": "#c5b8ca",
      "400": "#a796ae",
      "500": "#8c7694",
      "600": "#755f7d",
      "700": "#614d67",
      "800": "#514156",
      "900": "#443847",
      "950": "#2b232d",
    },
  },
  {
    name: "Olive",
    shades: {
      "50": "#f7f7f3",
      "100": "#ebebe3",
      "200": "#d8d9c9",
      "300": "#bbbd9f",
      "400": "#9ca07c",
      "500": "#838662",
      "600": "#686b4e",
      "700": "#53563f",
      "800": "#454734",
      "900": "#3c3d2e",
      "950": "#1e1f17",
    },
  },
  {
    name: "Mist",
    shades: {
      "50": "#f0f4f5",
      "100": "#dde6e8",
      "200": "#c3d3d6",
      "300": "#9cb7bc",
      "400": "#6d9198",
      "500": "#4f7580",
      "600": "#45646f",
      "700": "#3d5560",
      "800": "#384850",
      "900": "#323f45",
      "950": "#21292d",
    },
  },
  {
    name: "Taupe",
    shades: {
      "50": "#f6f3f2",
      "100": "#ede7e5",
      "200": "#ddd2ce",
      "300": "#c7b6b0",
      "400": "#ac958d",
      "500": "#947d74",
      "600": "#7f6a63",
      "700": "#675752",
      "800": "#574a46",
      "900": "#4a403d",
      "950": "#2b2422",
    },
  },
] as const;

export type PaletteColorFamily = (typeof TAILWIND_COLOR_PALETTE)[number]["name"];

export type PaletteControlValue = {
  family: PaletteColorFamily;
  shade: PaletteShadeStep;
};

export const STYLE_GUIDE_PRIMARY_FAMILY_OPTIONS = TAILWIND_COLOR_PALETTE.slice(0, -1);

export function getPaletteHex(value: PaletteControlValue): string {
  const palette = TAILWIND_COLOR_PALETTE.find((entry) => entry.name === value.family) ?? TAILWIND_COLOR_PALETTE[0];
  return palette.shades[value.shade].toLowerCase();
}