import { SvgName } from "./Names";

export type SvgSize = 10 | 12 | 16 | 20;

const SvgSizes: { [key in SvgName]?: { [key: string]: string } } = {
  compose: {
    "16": "compose-16x16"
  },
  "log-time": {
    "16": "log-time-16x16"
  },
  "clipboard-empty": {
    "16": "clipboard-empty-16x16"
  },
  "split-task": {
    "16": "split-task-16x16"
  },
  "calendar-empty": {
    "16": "calendar-empty-16x16"
  },
  "linear-plus": {
    "12": "linear-plus-12x12"
  },
  clock3: {
    "16": "clock3-16x16"
  },
  purchase: {
    "16": "purchase-16x16"
  },
  "speed-fast": {
    "16": "speed-fast-16x16"
  },
  star: {
    "16": "star-16x16"
  },
  bubbles: {
    "16": "bubbles-16x16"
  },
  inbox: {
    "16": "inbox-16x16"
  },
  "chart-growth": {
    "16": "chart-growth-16x16"
  },
  "waterfall-rectangles": {
    "16": "waterfall-rectangles-16x16"
  },
  "medal-with-star": {
    "16": "medal-with-star-16x16"
  },
  users2: {
    "16": "users2-16x16"
  },
  warning: {
    "16": "warning-16x16"
  },
  clicked: {
    "16": "clicked-16x16"
  },
  opened: {
    "16": "opened-16x16"
  },
  "qbo-logo": {
    "16": "qbo-logo-16x16"
  },
  timer: {
    "15": "timer-15x15"
  },
  "cash-dollar": {
    "15": "cash-dollar-15x15"
  },
  relocate: {
    "16": "relocate-16x16"
  },
  forward: {
    "16": "forward-16x16"
  },
  "reply-stroke": {
    "16": "reply-stroke-16x16"
  },
  funnel: {
    "16": "funnel-16x16"
  },
  issue: {
    "16": "issue-16x16"
  },
  trash: {
    "16": "trash-16x16"
  },
  task: {
    "16": "task-16x16"
  },
  copy: {
    "16": "copy-16x16"
  },
  fax: {
    "16": "fax-16x16"
  },
  email: {
    "16": "envelope-centered-16x16"
  },
  "smart-phone": {
    "16": "smartphone-16x16"
  },
  "small-lock": {
    "10": "small-lock-10x10"
  },
  "filled-alert": {
    "16": "filled-alert-16x16",
    "12": "filled-alert-12x12"
  },
  "pop-out": {
    "16": "pop-out-16x16"
  },
  ninjarmm: {
    "16": "ninjarmm-16x16"
  },
  teamviewer: {
    "16": "teamviewer-16x16"
  },
  "bold-cross": {
    "8": "bold-cross-8x8",
    "10": "bold-cross-10x10"
  },
  "main-plus": {
    "14": "main-plus-14x14",
    "16": "main-plus-16x16"
  },
  "tick-bend": {
    "12": "tick-bend-12x12"
  },
  activity: {
    "16": "activity-16x16"
  },
  "milestone-custom": {
    "16": "milestone-custom-16x16"
  },
  cube: {
    "16": "cube-16x16"
  },
  tags: {
    "16": "tags-16x16"
  },
  "invoices-custom": {
    "16": "invoices-custom-16x16"
  },
  "retainers-custom": {
    "16": "retainers-custom-16x16"
  },
  "retainer-period-custom": {
    "16": "retainer-period-custom-16x16"
  },
  "requests-custom": {
    "16": "requests-custom-16x16"
  },
  checklist: {
    "20": "checklist-20x20",
    "16": "checklist-16x16"
  },
  "add-checklist": {
    "16": "add-checklist-16x16"
  },
  "drag-drop": {
    "16": "drag-drop-16x16"
  },
  receipt: {
    "16": "receipt-16x16"
  },
  "tool-briefcase": {
    "16": "tool-briefcase-16x16"
  },
  gusto: {
    "16": "gusto-logo-16x16",
    "20": "gusto-logo-20x20"
  }
};

const defaultIconSize = "20x20";
export function getSvgSize(svgName: SvgName, size: SvgSize): string {
  if (SvgSizes[svgName] && SvgSizes[svgName][size])
    return SvgSizes[svgName][size];

  return `${svgName}-${defaultIconSize}`;
}