import { ChangeDetectionStrategy, Component, OnInit, Input, OnDestroy } from '@angular/core';
import { Router } from '@angular/router';
import { Store, Select } from '@ngxs/store';
import { Breadcrumb } from '../../../../core/models/breadcrumb.model';
import { AddBreadcrumb } from '../../../../core/store/actions/breadcrumb.actions';
import { ChangeCurrentRoute, SetDetailsCustomer } from '../../../../core/store/actions/process.actions';
import { Observable, Subject } from 'rxjs';
import { SharedSelectors } from '../../../../core/store/selectors/shared.selectors';
import { ProcessCart } from '../../../../core/models/process-cart.model';
import { map, filter, take, takeUntil, distinctUntilChanged } from 'rxjs/operators';
import { getProperty } from 'apps/sales/src/app/core/utils/app.utils';

@Component({
  selector: 'app-invoice-address',
  templateUrl: './invoice-address.component.html',
  styleUrls: ['./invoice-address.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class InvoiceAddressComponent implements OnInit, OnDestroy {
  @Select(SharedSelectors.getCart) cartData$: Observable<ProcessCart>;
  invoiceAddress$: Observable<string>;
  @Input() disableAddressChanging: boolean;
  destroy$ = new Subject();
  constructor(private store: Store, private router: Router) {}

  ngOnInit() {
    this.invoiceAddress$ = this.cartData$.pipe(
      takeUntil(this.destroy$),
      distinctUntilChanged(),
      map((data: ProcessCart) => {
        if (data && data.customer) {
          const customer = data.customer;

          let invoice = '';
          let delivery = '';

          if (customer.invoice_address && customer.invoice_address.street) {
            const { first_name, last_name, street, zip, streetNo, city } = customer.invoice_address;
            const streetNumber = streetNo ? streetNo : '';
            invoice = `${first_name} ${last_name} | ${street} ${streetNumber}, ${zip} ${city}`;
          }

          if (customer.delivery_addres && customer.delivery_addres.street) {
            const { first_name, last_name, street, zip, streetNo, city } = customer.delivery_addres;
            const streetNumber = streetNo ? streetNo : '';
            delivery = `${first_name} ${last_name} | ${street} ${streetNumber}, ${zip} ${city}`;
          }

          return invoice ? invoice : delivery;
        }
        return '';
      })
    );
  }

  ngOnDestroy(): void {
    this.destroy$.next();
  }

  redirectToBilling() {
    const cart = this.store.selectSnapshot(SharedSelectors.getCart);

    if (cart.customer) {
      const customerId = cart.customer.id;
      const currentRoute = '/customer/edit/' + customerId + '/billing';

      const newBread: Breadcrumb = {
        name: 'Rechnungsadresse',
        path: currentRoute,
        queryParams: { cart: true, notEditable: true },
      };

      this.store.dispatch(new SetDetailsCustomer(customerId));
      this.store.dispatch(new AddBreadcrumb(newBread, 'shoppingCart'));
      this.store.dispatch(new ChangeCurrentRoute(currentRoute));
      this.router.navigate([currentRoute], { queryParams: { cart: true, notEditable: true } });
    }
  }
}
