import { FunPenComponent } from '/src/components/base.mjs';

class SonicDiamond extends FunPenComponent {
  static origin = { x: 9, y: 9 };
  static baseSize = { w: 18, h: 18 };

  static presetProps = {
    shape:   ['classic', 'elongated', 'flat', 'round', 'raw'],
    color:   ['blue', 'cyan', 'green', 'magenta', 'pink', 'red'],
    chipped: ['false', 'true'],
  };

  // Chipped variants exist only for these shapes. Other combinations
  // silently fall back to the non-chipped variant.
  static chippedShapes = new Set(['classic', 'round']);

  // @editor:anchors-start
  static anchorsDefault = {};
  // @editor:anchors-end

  // @editor:variants-start
  static variants = {
    classic_blue:    { img: '/assets/themes/sonic/items/diamonds/01-classic-blue.png',    dx: 0, dy: 0, scale: 1, anchors: {} },
    classic_cyan:    { img: '/assets/themes/sonic/items/diamonds/01-classic-cyan.png',    dx: 0, dy: 0, scale: 1, anchors: {} },
    classic_green:   { img: '/assets/themes/sonic/items/diamonds/01-classic-green.png',   dx: 0, dy: 0, scale: 1, anchors: {} },
    classic_magenta: { img: '/assets/themes/sonic/items/diamonds/01-classic-magenta.png', dx: 0, dy: 0, scale: 1, anchors: {} },
    classic_pink:    { img: '/assets/themes/sonic/items/diamonds/01-classic-pink.png',    dx: 0, dy: 0, scale: 1, anchors: {} },
    classic_red:     { img: '/assets/themes/sonic/items/diamonds/01-classic-red.png',     dx: 0, dy: 0, scale: 1, anchors: {} },

    elongated_blue:    { img: '/assets/themes/sonic/items/diamonds/02-elongated-blue.png',    dx: 0, dy: 0, scale: 1, anchors: {} },
    elongated_cyan:    { img: '/assets/themes/sonic/items/diamonds/02-elongated-cyan.png',    dx: 0, dy: 0, scale: 1, anchors: {} },
    elongated_green:   { img: '/assets/themes/sonic/items/diamonds/02-elongated-green.png',   dx: 0, dy: 0, scale: 1, anchors: {} },
    elongated_magenta: { img: '/assets/themes/sonic/items/diamonds/02-elongated-magenta.png', dx: 0, dy: 0, scale: 1, anchors: {} },
    elongated_pink:    { img: '/assets/themes/sonic/items/diamonds/02-elongated-pink.png',    dx: 0, dy: 0, scale: 1, anchors: {} },
    elongated_red:     { img: '/assets/themes/sonic/items/diamonds/02-elongated-red.png',     dx: 0, dy: 0, scale: 1, anchors: {} },

    flat_blue:    { img: '/assets/themes/sonic/items/diamonds/03-flat-blue.png',    dx: 0, dy: 0, scale: 1, anchors: {} },
    flat_cyan:    { img: '/assets/themes/sonic/items/diamonds/03-flat-cyan.png',    dx: 0, dy: 0, scale: 1, anchors: {} },
    flat_green:   { img: '/assets/themes/sonic/items/diamonds/03-flat-green.png',   dx: 0, dy: 0, scale: 1, anchors: {} },
    flat_magenta: { img: '/assets/themes/sonic/items/diamonds/03-flat-magenta.png', dx: 0, dy: 0, scale: 1, anchors: {} },
    flat_pink:    { img: '/assets/themes/sonic/items/diamonds/03-flat-pink.png',    dx: 0, dy: 0, scale: 1, anchors: {} },
    flat_red:     { img: '/assets/themes/sonic/items/diamonds/03-flat-red.png',     dx: 0, dy: 0, scale: 1, anchors: {} },

    round_blue:    { img: '/assets/themes/sonic/items/diamonds/04-round-blue.png',    dx: 0, dy: 0, scale: 1, anchors: {} },
    round_cyan:    { img: '/assets/themes/sonic/items/diamonds/04-round-cyan.png',    dx: 0, dy: 0, scale: 1, anchors: {} },
    round_green:   { img: '/assets/themes/sonic/items/diamonds/04-round-green.png',   dx: 0, dy: 0, scale: 1, anchors: {} },
    round_magenta: { img: '/assets/themes/sonic/items/diamonds/04-round-magenta.png', dx: 0, dy: 0, scale: 1, anchors: {} },
    round_pink:    { img: '/assets/themes/sonic/items/diamonds/04-round-pink.png',    dx: 0, dy: 0, scale: 1, anchors: {} },
    round_red:     { img: '/assets/themes/sonic/items/diamonds/04-round-red.png',     dx: 0, dy: 0, scale: 1, anchors: {} },

    raw_blue:    { img: '/assets/themes/sonic/items/diamonds/05-raw-blue.png',    dx: 0, dy: 0, scale: 1, anchors: {} },
    raw_cyan:    { img: '/assets/themes/sonic/items/diamonds/05-raw-cyan.png',    dx: 0, dy: 0, scale: 1, anchors: {} },
    raw_green:   { img: '/assets/themes/sonic/items/diamonds/05-raw-green.png',   dx: 0, dy: 0, scale: 1, anchors: {} },
    raw_magenta: { img: '/assets/themes/sonic/items/diamonds/05-raw-magenta.png', dx: 0, dy: 0, scale: 1, anchors: {} },
    raw_pink:    { img: '/assets/themes/sonic/items/diamonds/05-raw-pink.png',    dx: 0, dy: 0, scale: 1, anchors: {} },
    raw_red:     { img: '/assets/themes/sonic/items/diamonds/05-raw-red.png',     dx: 0, dy: 0, scale: 1, anchors: {} },

    classic_blue_chipped:    { img: '/assets/themes/sonic/items/diamonds/06-classic-blue-chipped.png',    dx: 0, dy: 0, scale: 1, anchors: {} },
    classic_cyan_chipped:    { img: '/assets/themes/sonic/items/diamonds/06-classic-cyan-chipped.png',    dx: 0, dy: 0, scale: 1, anchors: {} },
    classic_green_chipped:   { img: '/assets/themes/sonic/items/diamonds/06-classic-green-chipped.png',   dx: 0, dy: 0, scale: 1, anchors: {} },
    classic_magenta_chipped: { img: '/assets/themes/sonic/items/diamonds/06-classic-magenta-chipped.png', dx: 0, dy: 0, scale: 1, anchors: {} },
    classic_pink_chipped:    { img: '/assets/themes/sonic/items/diamonds/06-classic-pink-chipped.png',    dx: 0, dy: 0, scale: 1, anchors: {} },
    classic_red_chipped:     { img: '/assets/themes/sonic/items/diamonds/06-classic-red-chipped.png',     dx: 0, dy: 0, scale: 1, anchors: {} },

    round_blue_chipped:    { img: '/assets/themes/sonic/items/diamonds/07-round-blue-chipped.png',    dx: 0, dy: 0, scale: 1, anchors: {} },
    round_cyan_chipped:    { img: '/assets/themes/sonic/items/diamonds/07-round-cyan-chipped.png',    dx: 0, dy: 0, scale: 1, anchors: {} },
    round_green_chipped:   { img: '/assets/themes/sonic/items/diamonds/07-round-green-chipped.png',   dx: 0, dy: 0, scale: 1, anchors: {} },
    round_magenta_chipped: { img: '/assets/themes/sonic/items/diamonds/07-round-magenta-chipped.png', dx: 0, dy: 0, scale: 1, anchors: {} },
    round_pink_chipped:    { img: '/assets/themes/sonic/items/diamonds/07-round-pink-chipped.png',    dx: 0, dy: 0, scale: 1, anchors: {} },
    round_red_chipped:     { img: '/assets/themes/sonic/items/diamonds/07-round-red-chipped.png',     dx: 0, dy: 0, scale: 1, anchors: {} },
  };
  // @editor:variants-end

  _variantKey() {
    const shape = this.getAttribute('shape') ?? this.constructor.presetProps.shape[0];
    const color = this.getAttribute('color') ?? this.constructor.presetProps.color[0];
    const chipped = this.getAttribute('chipped') === 'true';
    const supportsChipped = this.constructor.chippedShapes.has(shape);
    return supportsChipped && chipped
      ? `${shape}_${color}_chipped`
      : `${shape}_${color}`;
  }
}

customElements.define('sonic-diamond', SonicDiamond);