import briefcaseIcon from '../assets/workbench-icons/outline-briefcase.svg?raw'
import documentTextIcon from '../assets/workbench-icons/outline-document-text.svg?raw'
import paperAirplaneIcon from '../assets/workbench-icons/outline-paper-airplane.svg?raw'
import shoppingBagIcon from '../assets/workbench-icons/outline-shopping-bag.svg?raw'
import truckIcon from '../assets/workbench-icons/outline-truck.svg?raw'
import usersIcon from '../assets/workbench-icons/outline-users.svg?raw'

import capExpenseImg from '../assets/images/cap-expense.png'
import capReimbImg from '../assets/images/cap-reimb.png'
import capBudgetImg from '../assets/images/cap-budget.png'
import capApprovalImg from '../assets/images/cap-approval.png'
import capAnalysisImg from '../assets/images/cap-analysis.png'
import capPolicyImg from '../assets/images/cap-policy.png'

function prepareHeroiconMarkup(svgRaw) {
  return String(svgRaw || '')
    .replace(/<svg\b([^>]*)>/i, '<svg class="workbench-heroicon"$1>')
    .replace(/\sdata-slot="[^"]*"/g, '')
    .replace(/\saria-hidden="[^"]*"/g, '')
}

function prepareImageMarkup(src) {
  return `<img src="${src}" class="workbench-image-icon" alt="" />`
}

export const workbenchIconMap = {
  'expense-application': { markup: prepareImageMarkup(capExpenseImg), style: 'image' },
  'quick-reimbursement': { markup: prepareImageMarkup(capReimbImg), style: 'image' },
  'budget-planning': { markup: prepareImageMarkup(capBudgetImg), style: 'image' },
  'quick-approval': { markup: prepareImageMarkup(capApprovalImg), style: 'image' },
  'finance-analysis': { markup: prepareImageMarkup(capAnalysisImg), style: 'image' },
  'company-policy': { markup: prepareImageMarkup(capPolicyImg), style: 'image' },
  hospitality: { markup: prepareHeroiconMarkup(usersIcon), style: 'outline' },
  travelDraft: { markup: prepareHeroiconMarkup(briefcaseIcon), style: 'outline' },
  receipts: { markup: prepareHeroiconMarkup(documentTextIcon), style: 'outline' },
  flight: { markup: prepareHeroiconMarkup(paperAirplaneIcon), style: 'outline' },
  transport: { markup: prepareHeroiconMarkup(truckIcon), style: 'outline' },
  procurement: { markup: prepareHeroiconMarkup(shoppingBagIcon), style: 'outline' }
}
