/**
 * Map Icon Templates and Builder
 * Provides reusable SVG icon templates for map markers and info windows
 */

// Icon path templates (inner SVG content without wrapper)
const iconTemplates = {
  events: '<path fill="{{color}}" d="M13 14h-2V9h2m0 9h-2v-2h2M1 21h22L12 2z"/>',
  teams: '<path fill="{{color}}" d="M12 10a4 4 0 1 0 0-8a4 4 0 0 0 0 8m-6.5 3a2.5 2.5 0 1 0 0-5a2.5 2.5 0 0 0 0 5M21 10.5a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0m-9 .5a5 5 0 0 1 5 5v6H7v-6a5 5 0 0 1 5-5m-7 5c0-.693.1-1.362.288-1.994l-.17.014A3.5 3.5 0 0 0 2 17.5V22h3zm17 6v-4.5a3.5 3.5 0 0 0-3.288-3.494c.187.632.288 1.301.288 1.994v6z"/>',
  warehouses: '<path fill="{{color}}" d="M2 21V7l10-4l10 4v14h-6v-8H8v8zm7 0v-2h2v2zm2-3v-2h2v2zm2 3v-2h2v2z"/>',
  experts: '<path fill="{{color}}" d="M12 12q-1.65 0-2.825-1.175T8 8t1.175-2.825T12 4t2.825 1.175T16 8t-1.175 2.825T12 12m-8 6v-.8q0-.85.438-1.562T5.6 14.55q1.55-.775 3.15-1.162T12 13t3.25.388t3.15 1.162q.725.375 1.163 1.088T20 17.2v.8q0 .825-.587 1.413T18 20H6q-.825 0-1.412-.587T4 18"/>',
  vehicles: '<path fill="{{color}}" d="m5 11l1.5-4.5h11L19 11m-1.5 5a1.5 1.5 0 0 1-1.5-1.5a1.5 1.5 0 0 1 1.5-1.5a1.5 1.5 0 0 1 1.5 1.5a1.5 1.5 0 0 1-1.5 1.5m-11 0A1.5 1.5 0 0 1 5 14.5A1.5 1.5 0 0 1 6.5 13A1.5 1.5 0 0 1 8 14.5A1.5 1.5 0 0 1 6.5 16M18.92 6c-.2-.58-.76-1-1.42-1h-11c-.66 0-1.22.42-1.42 1L3 12v8a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1v-1h12v1a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1v-8z"/>',
  // Camera icon (rounded camera body with lens), type: 'cameras'
  cameras: '<path fill="{{color}}" d="M12 15.5A3.5 3.5 0 0 1 8.5 12A3.5 3.5 0 0 1 12 8.5a3.5 3.5 0 0 1 3.5 3.5a3.5 3.5 0 0 1-3.5 3.5m7.43-2.53c.04-.32.07-.64.07-.97c0-.33-.03-.66-.07-1l2.11-1.63c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.31-.61-.22l-2.49 1c-.52-.4-1.06-.73-1.69-.98l-.37-2.65A.506.506 0 0 0 14 2h-4c-.25 0-.46.18-.5.42l-.37 2.65c-.63.25-1.17.59-1.69.98l-2.49-1c-.22-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64L4.57 11c-.04.34-.07.67-.07 1c0 .33.03.65.07.97l-2.11 1.66c-.19.15-.25.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1.01c.52.4 1.06.74 1.69.99l.37 2.65c.04.24.25.42.5.42h4c.25 0 .46-.18.5-.42l.37-2.65c.63-.26 1.17-.59 1.69-.99l2.49 1.01c.22.08.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.66Z"/>'
}

// ViewBox definitions for each icon type (x y width height)
const iconViewBoxes = {
  events: '0 0 24 24',
  teams: '0 0 24 24',
  warehouses: '0 0 24 24',
  experts: '0 0 24 24',
  vehicles: '0 0 24 24',
  cameras: '0 0 24 24'
}

/**
 * Builds an SVG icon with specified parameters
 * @param {string} type - Icon type (events, teams, warehouses, experts, vehicles)
 * @param {number} size - Icon size in pixels
 * @param {string} color - Fill color (hex code)
 * @param {Object} options - Additional options
 * @param {boolean} options.withStroke - Whether to add white stroke border (default: false)
 * @param {string} options.strokeColor - Stroke color (default: '#fff')
 * @param {number} options.strokeWidth - Stroke width (default: 0.5)
 * @returns {string} Complete SVG string
 */
export function buildMapIcon(type, size, color, options = {}) {
  const {
    withStroke = false,
    strokeColor = '#fff',
    strokeWidth = 0.5
  } = options

  // Get icon template or use fallback
  const template = iconTemplates[type] || '<circle cx="8" cy="8" r="3" fill="{{color}}"/>'
  
  // Get viewBox for this icon type or use default
  const viewBox = iconViewBoxes[type] || '0 0 16 16'
  
  // Replace color placeholder
  let content = template.replace(/\{\{color\}\}/g, color)
  
  // Add stroke if requested
  if (withStroke) {
    // Add stroke to all fill elements
    content = content.replace(/fill="([^"]*)"/g, (match, fillColor) => {
      return `${match} stroke="${strokeColor}" stroke-width="${strokeWidth}"`
    })
  }
  
  return `<svg width="${size}" height="${size}" viewBox="${viewBox}" xmlns="http://www.w3.org/2000/svg">${content}</svg>`
}

/**
 * Builds a data URI from SVG string for use as image source
 * @param {string} svgString - Complete SVG string
 * @returns {string} Data URI
 */
export function svgToDataUri(svgString) {
  const encoded = encodeURIComponent(svgString)
  return `data:image/svg+xml;charset=utf-8,${encoded}`
}

/**
 * Builds a map marker icon as data URI
 * Convenience function that combines buildMapIcon and svgToDataUri
 * @param {string} type - Icon type
 * @param {number} size - Icon size
 * @param {string} color - Fill color
 * @param {Object} options - Additional options
 * @returns {string} Data URI for use as marker icon
 */
export function buildMarkerIconUri(type, size, color, options = {}) {
  const svg = buildMapIcon(type, size, color, options)
  return svgToDataUri(svg)
}

/**
 * Get available icon types
 * @returns {string[]} Array of icon type names
 */
export function getIconTypes() {
  return Object.keys(iconTemplates)
}