import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Neigbours, simpleMerge} from '../../lib/filler/common/kmeans';
import { ColorMap, ColorSumItem } from '../../lib/filler/common/interfaces';
import { ArtService } from './art.service';
import { colorDistance, colorMapToColorSum } from '../../lib/filler/common/color-merge';

@Component({
  selector: 'art-color-merge',
  template: `

  <div>
    <ng-container *ngIf="_colorSum">
      <h5><ng-container i18n>合并前颜色数</ng-container>:{{_colorSum.length}} </h5>

      <div class="d-flex flex-row">
        <div class="align-self-center p-2">
        <ng-container i18n>最小颜色距离</ng-container>:{{minDist}}
        </div>
        <div class="flex-grow-1  align-self-center p-2">
        <input type="range" class="form-range"  min="1" max="20" step="0.1"   [(ngModel)]="minDist"  id="myRange">
        </div>

      </div>

      <h5 *ngIf="neigbours" ><ng-container i18n>合并后颜色数量</ng-container>:{{neigbours.length}}</h5>

      <div *ngFor="let nei of mergeable">
        <ng-container *ngIf="nei.neigbours.length > 1">
          <art-color-box  [data]="nei.self" [minDist]="minDist" [showTrash]="false" [showOrder]="false" [colorInt]="curColorInt" (click)="curColorInt=nei.self.color" ></art-color-box>
          &lt;--
          <ng-container *ngFor="let item of nei.neigbours">
            <art-color-box  [data]="item" [minDist]="minDist" [showTrash]="false" [showOrder]="false" [colorInt]="curColorInt" (click)="curColorInt=item.color" ></art-color-box>
          </ng-container>
        </ng-container>
      </div>

      <div class="d-flex flex-row-reverse gap-1">
        <button class="btn btn-primary"  type="submit" (click)="update.emit(outputColorMap)" [disabled]="false" i18n>确定</button>
      </div>

    </ng-container>

  </div>
  `,
  styles: []
})
export class ColorMergeComponent implements OnInit {

  @Output('update') update: EventEmitter<any> = new EventEmitter();
  @Output('cancel') cancel: EventEmitter<void> = new EventEmitter();


  private _colorMap: ColorMap;
  public get colorMap(): ColorMap {
    return this._colorMap;
  }
  @Input('colorMap') public set colorMap(value: ColorMap) {
    this._colorMap = value;
    this._colorSum = colorMapToColorSum(this._colorMap);
    this.mergeColor();
  }


  id: string;
  _colorSum: ColorSumItem[];

  curColorInt: number;


  neigbours: Neigbours<ColorSumItem>[];
  outputColorMap: ColorMap;

  private _minDist: number = 4;
  public get minDist(): number {
    return this._minDist;
  }
  public set minDist(value: number) {
    this._minDist = value;
    console.log('value changed!', this._minDist);
    this.mergeColor();
  }

  constructor(
    private route: ActivatedRoute,
    private artService: ArtService,
  ) {
    this.id = this.route.snapshot.paramMap.get('id');
    if (this.id) {
    }
  }

  async ngOnInit() {
    if (this.id && !this.colorMap) {
      this.colorMap = await (this.artService.getBin(this.id, 'colorMap').toPromise() as Promise<ColorMap>);
    }
  }

  mergeColor() {
    this.neigbours = simpleMerge<ColorSumItem>(this._colorSum, this.minDist, colorDistance);
    console.log(this.neigbours);
    //colorMap
    let colorMap = {};
    this.neigbours.forEach(nei => {
      let color = nei.self.color;
      let cssColor = nei.self.cssColor;
      let res = { color, cssColor };
      nei.neigbours.forEach(item => {
        item.areas.forEach(area => {
          colorMap[area] = res;
        })
      })
    })
    console.log('colorMap', colorMap);
    this.outputColorMap = colorMap;
  }


  get mergeable() {
    if (!this.neigbours) return [];
    return this.neigbours.filter(nei => nei.neigbours.length > 1);
  }

  get notMergeable() {
    if (!this.neigbours) return [];
    return this.neigbours.filter(nei => nei.neigbours.length <= 1);
  }
}

