import { NgIf } from '@angular/common';
import { Component, EventEmitter, OnInit } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { ActivatedRoute, Router, RouterLink } from '@angular/router';
import { isEqual } from 'lodash';
import { delay } from 'rxjs';
import { RecipeService } from 'src/app/core/services/recipe.service';
import { ConfirmModal } from 'src/app/shared/modal/confirm/confirm-modal.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { animate, style, transition, trigger } from '@angular/animations';

interface RecipeDetail {
  productCode: string;
  name: string;
  otherName: string;
  description: string;
  otherDescription: string;
  price: number;
  isUse: boolean;
  isShow: boolean;
  disable: boolean;
}

interface RecipeMetaData {
  productCode: string;
  name: string;
  otherName: string;
  description: string;
  otherDescription: string;
  picture: string;
}

@Component({
  selector: 'app-recipe-details',
  templateUrl: './recipe-details.component.html',
  standalone: true,
  imports: [NgIf, RouterLink, ReactiveFormsModule, ConfirmModal],
  animations: [
    trigger('inOutAnimation', [
      transition(':enter', [
        style({ opacity: 0 }),
        animate('1s ease-out', style({ opacity: 1 })),
      ]),
    ]),
  ],
})
export class RecipeDetailsComponent implements OnInit {
  title: string = 'Recipe Detail';
  recipeMetaData: RecipeMetaData | null = null;

  originalRecipeDetail: RecipeDetail | null = null;

  isLoaded: boolean = false;

  constructor(
    private _route: ActivatedRoute,
    private _router: Router,
    private _recipeService: RecipeService
  ) {}

  recipeDetail = new FormGroup({
    productCode: new FormControl<string>(''),
    name: new FormControl<string>(''),
    otherName: new FormControl<string>(''),
    description: new FormControl<string>(''),
    otherDescription: new FormControl<string>(''),
    price: new FormControl<number>(0),
    isUse: new FormControl<boolean>(false),
    isShow: new FormControl<boolean>(false),
    disable: new FormControl<boolean>(false),
  });

  ngOnInit() {
    this._recipeService
      .getRecipesById(this._route.snapshot.params['productCode'])
      .subscribe(({ recipe, recipeMetaData }) => {
        this.title = recipe.name + ' | ' + recipe.productCode;
        this.recipeDetail.patchValue({
          productCode: recipe.productCode,
          name: recipe.name,
          otherName: recipe.otherName,
          description: recipe.Description,
          otherDescription: recipe.otherDescription,
          price: recipe.cashPrice,
          isUse: recipe.isUse,
          isShow: recipe.isShow,
          disable: recipe.disable,
        });
        this.originalRecipeDetail = {
          productCode: recipe.productCode,
          name: recipe.name,
          otherName: recipe.otherName,
          description: recipe.Description,
          otherDescription: recipe.otherDescription,
          price: recipe.cashPrice,
          isUse: recipe.isUse,
          isShow: recipe.isShow,
          disable: recipe.disable,
        };
        this.recipeMetaData = recipeMetaData;
        this.isLoaded = true;
      });
  }

  showConfirmSaveModal: EventEmitter<boolean> = new EventEmitter<boolean>();
  showConfirmCloseModal: EventEmitter<boolean> = new EventEmitter<boolean>();

  confirmSave = {
    title: 'The changes detected!',
    message: 'Do you want to save changes?',
    confirmCallBack: () => {
      console.log('confirm save');
      this._router.navigate(['/recipes']);
    },
  };

  confirmClose = {
    title: 'The changes will be lost!',
    message: 'Do you want to close without saving?',
    confirmCallBack: () => {
      console.log('confirm close');
      this._router.navigate(['/recipes']);
    },
  };

  onPressConfirmSave() {
    if (this.isValueChanged) {
      this.showConfirmSaveModal.emit(true);
    } else {
      this._router.navigate(['/recipes']);
    }
  }

  onPressConfirmClose() {
    if (this.isValueChanged) {
      this.showConfirmCloseModal.emit(true);
    } else {
      this._router.navigate(['/recipes']);
    }
  }

  get isValueChanged() {
    return !isEqual(this.recipeDetail.value, this.originalRecipeDetail);
  }
}