import { CdkDrag, CdkDragDrop, CdkDropList, DragDropModule, moveItemInArray } from '@angular/cdk/drag-drop';
import { CommonModule } from '@angular/common';
import { Component, inject } from '@angular/core';
import { GameService } from '../../../service/game.service';
import { Planet } from '../../../model/planet.model';
import { TradeRoute } from '../../../model/routes/trade-route.model';
import { MatTooltipModule } from '@angular/material/tooltip';

@Component({
  selector: 'app-trade-route',
  imports: [CommonModule, DragDropModule, CdkDropList, CdkDrag, MatTooltipModule],
  templateUrl: './trade-route.component.html',
  styleUrl: './trade-route.component.scss'
})
export class TradeRouteComponent {

  private gameService: GameService = inject(GameService);

  selectedPlanets: Planet[] = [];

  selectedRoute: TradeRoute = new TradeRoute([]);

  constructor() {}



  get availablePlanets(): Planet[] {
    return this.gameService.planets.filter(p => p.hasHarbour || true)
  }

  get availableRoutes(): TradeRoute[] {
    return this.gameService.tradeRoutes;
  }

  addPlanet(planet: Planet) {
    this.selectedPlanets.push(planet);
    console.log(this.selectedPlanets)
  }

  remove(planet: Planet) {
    this.selectedPlanets = this.selectedPlanets.filter(p => p != planet)
  }

  drop(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.selectedPlanets, event.previousIndex, event.currentIndex);
  }

  selectRoute(route: TradeRoute) {
    this.selectedRoute = route;
    this.selectedPlanets = route.getPlanets();
  }


  save() {
    this.selectedRoute.setPlanets(this.selectedPlanets);
    this.gameService.tradeRoutes.push(this.selectedRoute);
    this.newRoute();

  }

  newRoute() {
    this.selectRoute(new TradeRoute([]))
  }
}
