import './regionInfoCard.css'
import defaultRegionImg from '@/assets/img/map/lichi.png'
import config from '@/api/config.js'

function pickField(item, keys, fallback = '') {
  for (const key of keys) {
    const val = item[key]
    if (val !== undefined && val !== null && val !== '') {
      return val
    }
  }
  return fallback
}

function resolveImageUrl(item) {
  const raw = pickField(item, ['icon', 'image', 'img', 'speciesIcon', 'varietyIcon'])
  if (!raw) return defaultRegionImg
  if (/^https?:\/\//i.test(raw)) return raw
  if (raw.startsWith('/')) return raw
  return config.base_img_url2 + raw
}

/**
 * @param {Record<string, unknown>} item 分区数据
 * @param {{ enterSelectTree?: boolean, selected?: boolean, onClick?: () => void }} options
 */
export function createRegionInfoCard(item, options = {}) {
  const { enterSelectTree = false, selected = false, onClick } = options

  const el = document.createElement('div')
  el.className = 'region-info-card'
  if (enterSelectTree) el.classList.add('is-selectable')
  if (selected) el.classList.add('is-selected')

  const check = document.createElement('div')
  check.className = 'region-info-card__check'

  const img = document.createElement('img')
  img.className = 'region-info-card__img'
  img.alt = ''
  img.src = resolveImageUrl(item)
  img.onerror = () => {
    img.onerror = null
    img.src = defaultRegionImg
  }

  const body = document.createElement('div')
  body.className = 'region-info-card__body'

  const name = document.createElement('div')
  name.className = 'region-info-card__name'
  name.textContent = pickField(item, ['name', 'regionName'], '分区')

  const varietyRow = document.createElement('div')
  varietyRow.className = 'region-info-card__row'
  const varietyLabel = document.createElement('span')
  varietyLabel.className = 'region-info-card__label'
  varietyLabel.textContent = '品种：'
  const varietyVal = document.createElement('span')
  varietyVal.textContent = pickField(item, ['pz', 'speciesName', 'varietyName', 'variety'], '--')
  varietyRow.append(varietyLabel, varietyVal)

  const ageRow = document.createElement('div')
  ageRow.className = 'region-info-card__row'
  const ageLabel = document.createElement('span')
  ageLabel.className = 'region-info-card__label'
  ageLabel.textContent = '树龄：'
  const ageVal = document.createElement('span')
  const age = pickField(item, ['age', 'treeAge'])
  ageVal.textContent = age !== '' && age != null ? `${age}年` : '树龄'
  ageRow.append(ageLabel, ageVal)

  body.append(name, varietyRow, ageRow)

  const arrow = document.createElement('div')
  arrow.className = 'region-info-card__arrow'

  el.append(check, img, body, arrow)

  if (enterSelectTree && onClick) {
    el.addEventListener('click', (e) => {
      e.stopPropagation()
      onClick()
    })
  }

  return el
}

export function updateRegionInfoCard(el, { enterSelectTree, selected }) {
  if (!el) return
  el.classList.toggle('is-selectable', !!enterSelectTree)
  el.classList.toggle('is-selected', !!selected)
}