import {Container, Graphics} from 'pixi.js';

const COLORS = {
  MAIN_DARK: 0xffffff,
  MAIN_LIGHT: 0xffffff,
}

export default class ScrollBar extends Container {
  constructor() {
    super();
    this._minValue = 0;
    this._maxValue = 100;
    this._value = 0;
    this._trackWidth = 600;
    this._trackHeight = 10;
    this._handleWidth = 300;
    this._progress = 0;
    this._layout();
    this._drawProgress();

    this.sprites.trackBg.interactive = true;
    this.sprites.trackBg.on('pointerdown', (e) => {
      this._drag = true;
      this._x = this.sprites.trackBg.toLocal(e.global).x;
    });
    this.sprites.trackBg.on('pointerup', (e) => {
      this._drag = false;
    });
    this.sprites.trackBg.on('pointerupoutside', (e) => {
      this._drag = false;
    });
    this.sprites.trackBg.on("pointermove", (e) => {
      if (!this._drag) return
      const delta = this.sprites.trackBg.toLocal(e.global).x - this._x;
      this.emit("scroll", {deltaX: delta})
      this._x = this.sprites.trackBg.toLocal(e.global).x;
    })
    // this.sprites.hitAria.interactive = false;
    // this.sprites.hitAria.on('pointerdown', (e) => {
    //   this._drag = true;
    //   this.progress = this.sprites.hitAria.toLocal(e.data.global).x / this.trackWidth;
    // });
    // this.sprites.hitAria.on('pointerup', (e) => {
    //   this._drag = false;
    // });
    // this.sprites.hitAria.on('pointerupoutside', () => {
    //   this._drag = false;
    // });
    // this.sprites.hitAria.on('pointermove', (e) => {
    //   if (!this._drag) return;
    //   this.progress = this.sprites.trackBg.toLocal(e.data.global).x / this.trackWidth;
    // });
  }

  set trackHeight(v) {
    this._trackHeight = v;
    this._drawProgress()
  }

  set trackWidth(v) {
    if (typeof v !== 'number' || v < 0) return;
    this._trackWidth = v;
    this._drawProgress();
  }

  get trackWidth() {
    return this._trackWidth;
  }

  set handleWidth(v) {
    if (typeof v !== 'number' || v < 0) return;
    this._handleWidth = v;
    this._drawProgress();

    this.visible = this._handleWidth <= this._trackWidth;
  }

  get handleWidth() {
    return this._handleWidth;
  }

  set progress(v) {
    if (typeof v !== 'number' ) return;
    this._progress = Math.min(Math.max(0, v), 1);
    this._value = Math.round(this._minValue + (this._maxValue - this._minValue) * this._progress);
    this._progress = (this._value - this._minValue) / (this._maxValue - this._minValue);
    this.sprites.hitAria.x = this._trackWidth * this._progress;
    this._drawProgress();
  }

  get progress() {
    return this._progress;
  }

  set value(v) {
    if (typeof v !== 'number') return;
    this._value = Math.max(v, this._minValue);
    this._value = Math.min(this._value, this._maxValue);
    this.progress = (this._value - this._minValue) / (this._maxValue - this._minValue);
  }

  get value() {
    return this._value;
  }

  set minValue(v) {
    this._minValue = v;
    this.value = Math.max(this._minValue, this._value);
  }

  get minValue() {
    return this._minValue;
  }

  set maxValue(v) {
    this._maxValue = v;
    this.value = Math.min(this._maxValue, this._value);
  }

  get maxValue() {
    return this._maxValue;
  }

  _layout() {
    const trackBg = new Graphics();
    const hitAria = new Graphics()
        .beginFill(0xff0000, 0)
        .drawRect(-25, -25, 50, 50);
    this.addChild(hitAria, trackBg);
    this.sprites = {trackBg, hitAria};
  }

  _drawProgress() {
    this.sprites.trackBg
        .clear()
        .beginFill(0xFFFFFF, 0.2)
        .drawRoundedRect(0, -this._trackHeight * 0.5, this._trackWidth, this._trackHeight, this._trackHeight * 0.5)
        .beginFill(0xFFFFFF, 0.5)
        // disable progress fill.
        // .drawRoundedRect(0, -5, this._trackWidth * this._progress, 10, 5)
        // .beginFill(0x2283F6)
        .drawRoundedRect(this._trackWidth * this._progress, -this._trackHeight * 0.5, this._handleWidth, this._trackHeight, this._trackHeight * 0.5)
        .endFill()
        // .lineStyle(3, COLORS.MAIN_LIGHT, 0.4, 0)
        // .drawCircle(this._trackWidth * this._progress, 0, 25);
  }
}
