/**
 * SPDX-FileCopyrightText: 2024 Sascha Nitsch (grumpydeveloper) https://contentnation.net/@grumpydevelop
 * SPDX-License-Identifier: GPL-3.0-or-later
 * @author Author: Sascha Nitsch (grumpydeveloper)
 * @internal
 **/

import { PresentationMaker } from '../presentationmaker';
import { RTNode } from './rtnode';
import { RenderTree } from './rendertree';

/**
 * transform subtree by given options
 */
export class RTOptions extends RTNode {
  /** blend mode */
  private blendmode: string;
  /** flip axis */
  private flip: string;
  /** opactity */
  private opacity: string;
  /** rotate */
  private rotate: string;
  /** subtee to transform */
  private subtree: RenderTree;
  /** y position when flipping */
  private y: string;

  /**
   * clone function
   * @return a copy of us
   */
  clone(): RTOptions {
    return new RTOptions(
      this.root,
      this.subtree,
      this.opacity,
      this.blendmode,
      this.flip,
      this.rotate,
      this.y
    );
  }

  /**
   * constructor
   * @param root parent RenderTree
   * @param subtree child sub tree
   * @param opacity opacity value
   * @param blendmode blend mode
   * @param flip flip axis
   * @param rotate rotation in degree X, Y, Z
   * @param y y position when flipping
   */
  constructor(root: RenderTree, subtree: RenderTree, opacity: string, blendmode: string, flip: string, rotate: string, y: string) {
    super(root);
    this.subtree = subtree;
    this.opacity = opacity;
    this.blendmode = blendmode;
    this.flip = flip;
    this.rotate = rotate;
    this.y = y;
  }

  /**
   * create RTOptions from given node into given RenderTree
   * @param root render tree to insert to
   * @param node input node
   * @returns new RTOptions node
   */
  static fromElem(main: PresentationMaker, root: RenderTree, node: HTMLElement): RTOptions {
    const subtree = new RenderTree(main);
    subtree.createFromElem(node);
    return new RTOptions(
      root,
      subtree,
      this.getField(node, 'opacity') || '',
      this.getField(node, 'blend') || '',
      this.getField(node, 'flip') || '',
      this.getField(node, 'rotate') || '',
      this.getField(node, 'y') || ''
    );
  }

  /**
   * render our element into target
   * @param target target to render into
   */
  render(target: HTMLElement): void {
    const div = document.createElement('div');
    div.classList.add('option');
    if (this.opacity !== '') {
      div.style.opacity = this.opacity;
    }
    if (this.blendmode !== '') {
      div.style.mixBlendMode = this.blendmode;
    }
    if (this.flip !== '') {
      if (this.flip == 'v') {
        div.style.transform = 'scaleY(-1)';
      }
    }
    if (this.y) {
      div.style.position = 'absolute';
      div.style.bottom = '0px';
    }
    if (this.rotate !== '') {
      const r = this.rotate.split(',');
      let transform = '';
      if (r[0]) {
        transform += 'rotateX(' + (this.calc(this.resolveString(r[0]))) + 'deg)';
      }
      if (r[1]) {
        transform += 'rotateY(' + (this.calc(this.resolveString(r[1]))) + 'deg)';
      }
      if (r[2]) {
        transform += 'rotateZ(' + (this.calc(this.resolveString(r[2]))) + 'deg)';
      }
      div.style.transform = transform;
      div.style.transformOrigin = 'top left';
    }
    this.subtree.render(div);
    target.append(div);
  }
}