import {Component, OnInit, ViewChild} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {map} from 'rxjs/operators';
import {JsonEditorComponent, JsonEditorOptions} from 'ang-jsoneditor';
import {environment} from '@env/environment';

type JwtToken = {
  id_token: string;
};

@Component({
  selector: 'app-configure',
  templateUrl: './configure.component.html',
  styleUrls: ['./configure.component.scss']
})
export class ConfigureComponent implements OnInit {

  token: any = '';
  formulaire: any = '';
  formulaireTemp: any = '';
  variables: any = '';
  variablesTemp: any = '';
  modelCustom: any = '';

  tokenSaved = null;
  formSaved = null;
  varSaved = null;
  modelSaved = null;

  sourceId = '';
  previewEnvSelected = null;

  productId = '';
  customerId = '';

  authentification = {
    login: 'mick76@yopmail.com',
    password: '',
    envSelected: '',
    environment: [{
      name: 'local',
      value: 'https://opengateway.dev.magnolia.fr'
    }, {
      name: 'uatMagnolia',
      value: 'https://opengateway.uat.magnolia.fr'
    }, {
      name: 'uatSimulassur',
      value: 'https://opengateway.uat.simulassur.fr'
    }
    ]
  };

  @ViewChild(JsonEditorComponent, {static: false}) editor: JsonEditorComponent;
  @ViewChild('editorVariable', {static: false}) editorVariable: JsonEditorComponent;
  editorOptions = null;
  data = null;


  constructor(private http: HttpClient) {
    this.editorOptions = new JsonEditorOptions();
    this.editorOptions.modes = ['code', 'text', 'tree', 'view']; // set all allowed modes
    //this.options.mode = 'code'; //set only one mode

  }

  ngOnInit(): void {
    if (localStorage.getItem('token')) {
      this.token = localStorage.getItem('token');
    }
    if (localStorage.getItem('formulaire')) {
      this.formulaire = localStorage.getItem('formulaire');
      this.formulaire = JSON.parse(this.formulaire);
      this.formulaireTemp = this.formulaire;
    }
    if (localStorage.getItem('variables')) {
      this.variables = localStorage.getItem('variables');
      this.variables = JSON.parse(this.variables);
      this.variablesTemp = this.variables;
    }
    if (localStorage.getItem('modelCustom')) {
      this.modelCustom = localStorage.getItem('modelCustom');
    }
  }

  sauvegarder() {
    console.log(this.editorVariable.getEditor());
    if (this.token) {
      localStorage.setItem('token', this.token);
      this.tokenSaved = true;
    } else {
      this.tokenSaved = false;
    }

    if (this.isJsonString(JSON.stringify(this.formulaireTemp))) {
      localStorage.setItem('formulaire', JSON.stringify(this.formulaireTemp));
      this.formSaved = true;
    } else {
      this.formSaved = false;
    }
    if (this.isJsonString(JSON.stringify(this.editorVariable.getEditor().get()))) {
      localStorage.setItem('variables', JSON.stringify(this.editorVariable.getEditor().get()));
      this.varSaved = true;
    } else {
      this.varSaved = false;
    }
    if (this.isJsonString(this.modelCustom)) {
      localStorage.setItem('modelCustom', this.modelCustom);
      this.modelSaved = true;
    } else {
      this.modelSaved = false;
    }
  }

  isJsonString(str) {
    try {
      JSON.parse(str);
    } catch (e) {
      return false;
    }
    return true;
  }

  authenticate(): void {
    const credentials = {
      email: this.authentification.login,
      extranetOrigin: 'magnolia',
      password: this.authentification.password
    };

    this.http
      .post<JwtToken>(this.authentification.envSelected + '/api/authenticate', credentials)
      .pipe(map(response => this.authenticateSuccess(response))).toPromise();
  }

  private authenticateSuccess(response: JwtToken): void {
    this.token = response.id_token;
    if (this.token) {
      localStorage.setItem('token', this.token);
      this.tokenSaved = true;
    } else {
      this.tokenSaved = false;
    }
  }

  fillPreviewAndVariables() {
    this.setPreview();
  }

  setPreview(): void {
    this.http.get(`${environment.apiUrl}/api/product-collections/${this.sourceId}/preview`)
      .pipe(map(response => {
        const steps = 'steps';
        if (JSON.stringify(response[steps])) {
          this.formulaire = JSON.stringify(response[steps]);
          localStorage.setItem('formulaire', JSON.stringify(response[steps]));
          this.formSaved = true;
        } else {
          this.formSaved = false;
        }

      })).toPromise();
  }

  setVariables(): void {

    this.http.get(`${environment.apiUrl}/api/customer-variables/` +
      this.productId + '/' +
      this.customerId + '/' +
      this.sourceId)
      .pipe(map(response => {
          console.log(response);
          /*const steps = 'steps';
          if (JSON.stringify(response[steps])) {
            this.formulaire = JSON.stringify(response[steps]);
            localStorage.setItem('formulaire', JSON.stringify(response[steps]));
            this.formSaved = true;
          } else {
            this.formSaved = false;
          }*/
          const variables = 'variables';
          if (JSON.stringify(response[variables])) {
            this.variables = JSON.stringify(response[variables]);
            localStorage.setItem('modelCustom', JSON.stringify(response[variables]));
            this.varSaved = true;
          } else {
            this.varSaved = false;
          }

        }
      )).toPromise();
  }

  getData(event, setTo): void {
    console.log(event);
    this[`${setTo}Temp`] = event;
  }

  getDataVariable(event, setTo): void {
    console.log(event);
    this[`${setTo}Temp`] = event;
  }
}