<script>
import { SVG, elementInfo } from 'src/components/widgets/ubg-utils.js'

const A4_LANDSCAPE_MM = lively.pt(297, 210);
const a4 = lively.pt(0, 0).extent(A4_LANDSCAPE_MM)

const div = <div style={`margin: 0;
            padding: 0;
            position: relative;
            width: 297mm;
            height: 210mm;
            box-shadow: inset 0 0 0 1px darkblue;`}>
</div>;

function renderElementSymbol(element, pos, radius) {
  const innerBounds = pos.subPt(radius.scaleBy(.5)).extent(radius)
  const svgInnerPos = innerBounds.center();
  const svgInnerRadius = innerBounds.width / 2;
  const yourSvgString = SVG.outerSVG(SVG.elementSymbol(element, svgInnerPos, svgInnerRadius), a4, a4);

  div.insertAdjacentHTML('beforeend', yourSvgString)
}

const elements = ['fire', 'wind', 'earth', 'water']
const posByElement = {
  fire: A4_LANDSCAPE_MM.scaleBy(.25, .25),
  wind: A4_LANDSCAPE_MM.scaleBy(.75, .25),
  earth: A4_LANDSCAPE_MM.scaleBy(.25, .75),
  water: A4_LANDSCAPE_MM.scaleBy(.75, .75),
};
const rulesByElement = {
  fire: 'Return x cards from trash to hand.',
  wind: `Draw a card.
  Play a card costing up to (x).`,
  earth: `Draw a card.
  Gain (2x).`,
  water: 'Draw x cards.',
};


for await (let element of elements) {
  const pos = posByElement[element];

  
  renderElementSymbol(element, pos.subY(10), lively.pt(40, 40))


  const { stroke, fill } = elementInfo[element];
  
  div.append(<span style={`position: absolute;
      left: ${pos.x}mm;
      top: ${pos.y + 10}mm;
      transform: translate(-50%);
      font-size: 17mm;
      font-variant: small-caps slashed-zero;
      color: ${stroke};
      `}>{element.upperFirst()}</span>);

  
  div.append(await <ubg-rules-text style={`position: absolute;
      left: ${pos.x}mm;
      top: ${pos.y + 30}mm;
      text-align: center;
      transform: translate(-50%);
      font-size: 7mm;
      width: 500px;
      `}>{rulesByElement[element]}</ubg-rules-text>);
}


// const outer = SVG.outerSVG('', a4, a4, undefined, 'border: dotted 2px green;')
// div.insertAdjacentHTML('beforeend', outer)

div
</script>
