import { Component, Input, OnInit, ViewChild } from '@angular/core';

import { Car } from '../../../models/car';
import { CarService, ICarOptionsBackend } from '../../../services/car.service';
import { CarOption } from '../../../models/tradein/car-option';

import {
  AppPanelComponent
} from '../../../modules/app-panel/app-panel.component';

@Component({
  selector: 'app-car-card-options',
  templateUrl: 'car-options.component.html',
  styleUrls: ['car-options.component.scss']
})
export class CarOptionsComponent implements OnInit {
  @ViewChild(AppPanelComponent)
  private panelContainer: AppPanelComponent;

  @Input()
  private car: Car;

  private parentOptions: Array<CarOption> = [];

  private availableParentOptions: Array<CarOption> = [];
  private availableOptions: Array<CarOption> = [];

  private editing = false;

  constructor(private carService: CarService) {
    this
      .carService
      .equipmentChanged
      .subscribe(() => {
        this.loadOptions();
      });
  }

  ngOnInit() {
    this.panelContainer.loading = true;
    this.car.options = [];

    this.loadOptions();
  }

  public edit(): void {
    this.editing = true;
    this.panelContainer.loading = true;
    this
      .carService
      .editCarOptions(this.car.id)
      .subscribe((response: ICarOptionsBackend) => {
        let options = response.options.map(opt => new CarOption(opt));
        this.availableOptions = CarOption.setChecked(options, this.car.options);
        this.availableParentOptions =
          response.parent_options.map(opt => new CarOption(opt));
        this.panelContainer.loading = false;
      }, () => {
        this.panelContainer.loading = false;
      });
  }

  public cancel(): void {
    this.editing = false;
    this.availableParentOptions = [];
    this.availableOptions = [];
  }

  public update(): void {
    this.panelContainer.loading = true;
    this.car.options = [];

    this
      .carService
      .updateCarOptions(this.car.id, this.availableOptions)
      .subscribe((response: ICarOptionsBackend) => {
        this.car.options =
          response.options.map(opt => new CarOption(opt));
        this.parentOptions =
          response.parent_options.map(opt => new CarOption(opt));
        this.panelContainer.loading = this.editing = false;
      }, () => {
        this.panelContainer.loading = false;
      });
  }

  private loadOptions(): void {
    this
      .carService
      .getCarOptions(this.car.id)
      .subscribe((response: ICarOptionsBackend) => {
        this.car.options =
          response.options.map(opt => new CarOption(opt));
        this.parentOptions =
          response.parent_options.map(opt => new CarOption(opt));
        this.panelContainer.loading = false;
      }, () => {
        this.panelContainer.loading = false;
      });
  }
}