<template>
  <div style="pointer-events: none">
    <div class="custom-node">
      <div
        class="area"
        :style="`width:${props.pageData?.width || '100px'};height:${props.pageData?.height || '100px'};border: 1px solid ${getInverseColor(props.pageData.bgColor)};`"
      ></div>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  pageData: {
    type: Object,
    required: false
  }
});
const getInverseColor = (color) => {
  color = color.trim();

  // HEX
  if (color.startsWith('#')) {
    let hex = color.slice(1);

    if (hex.length === 3 || hex.length === 4) {
      hex = hex
        .split('')
        .map((c) => c + c)
        .join('');
    }

    let r = parseInt(hex.slice(0, 2), 16);
    let g = parseInt(hex.slice(2, 4), 16);
    let b = parseInt(hex.slice(4, 6), 16);

    let a = hex.length === 8 ? hex.slice(6, 8) : '';

    r = 255 - r;
    g = 255 - g;
    b = 255 - b;

    const toHex = (v) => v.toString(16).padStart(2, '0');

    return '#' + toHex(r) + toHex(g) + toHex(b) + a;
  }

  // RGB / RGBA
  const match = color.match(/rgba?\(([^)]+)\)/);

  if (match) {
    const parts = match[1].split(',').map((v) => v.trim());

    let r = 255 - parseInt(parts[0]);
    let g = 255 - parseInt(parts[1]);
    let b = 255 - parseInt(parts[2]);

    if (parts.length === 4) {
      return `rgba(${r}, ${g}, ${b}, ${parts[3]})`;
    }

    return `rgb(${r}, ${g}, ${b})`;
  }

  return color;
};
</script>
<style scoped>
.area {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-color: #0000;
}
</style>
