/*
 * ORDIMUTANTS <-> Recursive OrdiMutants Card Model
 * Copyright 2025 OrdiMutants
 * Inscriber: 741.sats
 */

import * as fflate from '/content/f815bd5c566c6e46de5cdb6ccb3a7043c63deeba61f4234baea84b602b0d4440i0'
import transform from '/content/7d3dd64f6598ea371aeff4d70b0f1728af0f57dd1747b58a190f7e52a9f5cd30i0'

const PADDING = 100
const WIDTH = 2048
const TOP_OFFSET = 1255
const ATTRIBUTE_OFFSET = TOP_OFFSET + PADDING + 220

export default async function(props, element, style) {
  const res = await fetch(
    '/content/83b2e90431c87df3045b80e774a747fa745f655132d25a6ab1600ce1b8307d98i0'
  )
  const compressed = new Uint8Array(await res.arrayBuffer())
  const inflated = await fflate.decompressSync(compressed)
  const base64 = btoa(inflated.reduce((data, byte) => data + String.fromCharCode(byte), ''))
  const url = `data:model/gltf-binary;base64,${base64}`

  const modelViewer = document.createElement('model-viewer')
  modelViewer.src = url

  Object.keys(style).forEach((key) => {
    modelViewer.style[key] = style[key]
  })

  let transformations = [
    // Border
    {
      material: 0,
      type: 'image',
      coords: [0, 0],
      size: [WIDTH, WIDTH],
      image: '/content/ed7d4f45edc689eaf9092fa95a20ca5bba23222152414281bb5644fcdca9f7bbi0'
    },
    // Back
    {
      material: 3,
      type: 'image',
      coords: [0, 0],
      size: [WIDTH, WIDTH],
      image: '/content/b173154ad61f00991d422e4af800d8cbd3a94f5545ef0f7ad1410d12c0cabcfei0'
    },
    // Body
    {
      material: 1,
      type: 'image',
      coords: [0, 0],
      size: [WIDTH, WIDTH],
      image: props.image
    },
    {
      material: 2,
      type: 'text',
      font: 'bold 120px Helvetica',
      text: props.title,
      coords: [PADDING, TOP_OFFSET + PADDING + 103],
      color: 'white'
    },
    {
      material: 2,
      type: 'text',
      font: '500 60px Helvetica',
      text: `Inscription #${props.inscription_num}`,
      coords: [PADDING, ATTRIBUTE_OFFSET],
      color: 'white'
    }
  ]

  props.attributes.forEach((a, index) => {
    let TOP_OFFSET = ATTRIBUTE_OFFSET + (index + 1) * 72
    const leftOffset = index % 2 === 0 ? PADDING : PADDING + 800

    if (index > 0) {
      TOP_OFFSET -= 72 * (index / 2)
    }

    if (index % 2 === 1) {
      TOP_OFFSET -= 36
    }

    transformations.push({
      material: 2,
      type: 'text',
      font: '52px Helvetica',
      text: `${a.trait_type}: ${a.value}`,
      coords: [leftOffset, TOP_OFFSET],
      color: '#BABBC7'
    })
  })

  modelViewer.setAttribute('ar', '')
  modelViewer.setAttribute('enable-pan', '')
  modelViewer.setAttribute('shadow-intensity', '1')
  modelViewer.setAttribute('camera-controls', '')
  modelViewer.setAttribute('touch-action', 'pan-y')

  modelViewer.addEventListener('load', async () => {
    transform(modelViewer, transformations)
  })

  element.appendChild(modelViewer)
}