import { h, s } from 'lib/h'

export function get(key: string, attrs: object = {}): Element {
  const elem = fromKey(key)
  if (elem !== undefined) {
    Object.entries(attrs).forEach(([key, value]) => {
      elem.setAttribute(key, value)
    })
    return elem
  } else {
    return h('span', {})
  }
}

// https://yqnn.github.io/svg-path-editor/
function fromKey(key: string): Element | undefined {
  if (key == 'house') {
    return s('svg',
      { viewBox: '0 0 10 10' },
      s('g', { 'stroke': 'none' },
        s('path', { d: 'M0 4V5H1.5V10H4V7C4.4 6.5 5.6 6.5 6 7V10H8.5V5H10V4L5 0Z' })
      )
    )
  } else if (key == 'music') {
    return s('svg',
      { viewBox: '0 0 10 10' },
      s('g', { 'stroke': 'none' },
        s('ellipse', { cx: '2', cy: '8.5', rx: '2', ry: '1.5' }),
        s('ellipse', { cx: '8', cy: '7', rx: '2', ry: '1.5' }),
        s('path', { d: 'M2.5 8.5 H4 V4.5 L8.5 3 V7 H10 V0 L2.5 2.5 Z' }),
      )
    )
  } else if (key == 'shopping-cart') {
    return s('svg',
      { viewBox: '0 0 10 10' },
      s('circle', { cx: '3.3', cy: '8.5', r: '0.8' }),
      s('circle', { cx: '7.3', cy: '8.5', r: '0.8' }),
      s('path', { d: 'M.5.6C1.3.6 1.8.7 2.1 1L2.3 6H8.5', fill: 'transparent' }),
      s('path', { d: 'M2.3 1.9H9.4L8.6 4H2.4' }),
    )
  } else if (key == 'medical') {
    return s('svg',
      { viewBox: '0 0 10 10' },
      s('path', { d: 'M5 1V9M1 5H9', style: 'stroke-width: 3' }),
    )
  } else if (key == 'envelope') {
    return s('svg',
      { viewBox: '0 0 10 10' },
      s('path', { d: 'M.5 2.5H9.5V7.5H.5ZM.5 3.4 3.5 5Q5 5.8 6.6 5L9.5 3.4', style: 'fill: transparent' }),
    )
  }
}

// Good to add:
// - loisir / cinéma / piscine
// - école
// - gare
// - bus
export function keys(): string[] {
  return [ 'house',
    'music',
    'shopping-cart',
    'medical',
    'envelope',
  ]
}