import { Component, OnDestroy, OnInit } from '@angular/core';
import { Validators } from '@angular/forms';
import { FormBuilderFactoryService } from '@core/services/form-builder-factory.service';
import { TimeZoneService } from '@core/services/time-zone.service';
import { ProgramApplicantType } from '@core/typings/program.typing';
import { ClientSettingsService } from '@features/client-settings/client-settings.service';
import { FileService, PanelTypes, TypeaheadSelectOption, TypeSafeFormBuilder, TypeSafeFormGroup, YcFile } from '@yourcause/common';
import { Subscription } from 'rxjs';
import { ProgramService } from '../program.service';

interface ProgramDetailsFormGroup {
  name: string;
  timeZone: string;
  description: string;
  programLogo: YcFile|string;
  backgroundImage: YcFile|string;
  hideCycleDatesInApplicantPortal: boolean;
  defaultLang: string;
}

@Component({
  selector: 'gc-program-details',
  templateUrl: './program-details.component.html',
  styleUrls: ['./program-details.component.scss']
})
export class ProgramDetailsComponent implements OnInit, OnDestroy {
  formGroup: TypeSafeFormGroup<ProgramDetailsFormGroup>;
  ProgramApplicantType = ProgramApplicantType;
  PanelTypes = PanelTypes;
  clientLogo: string;
  programLogo: string|YcFile;
  programLogoBase64: string;
  programBackground: string|YcFile;
  programBackgroundBase64: string;
  timeZones = this.timeZoneService.getTimeZones();
  timeZoneOptions: TypeaheadSelectOption<string>[] = this.timeZones.map((timeZone) => {
    return {
      label: timeZone.displayName,
      value: timeZone.id
    };
  });
  langKeys: string[];
  hasInternational = this.clientSettingsService.clientSettings.hasInternational;
  sub = new Subscription();

  constructor (
    private programService: ProgramService,
    private formBuilder: TypeSafeFormBuilder,
    private clientSettingsService: ClientSettingsService,
    private fileService: FileService,
    private timeZoneService: TimeZoneService,
    private formBuilderFactory: FormBuilderFactoryService
  ) {
    this.sub.add(this.programService.changesTo$('configureProgramMap')
      .subscribe(() => {
        this.updateValidation();
      }));
  }

  get isNomination () {
    return location.pathname.includes('nomination');
  }

  get programMap () {
    return this.programService.get('configureProgramMap');
  }

  get activeProgramId () {
    return this.programService.get('activeProgramId');
  }

  get program () {
    return this.programMap[this.activeProgramId];
  }

  get branding () {
    return this.clientSettingsService.get('clientBranding');
  }

  async ngOnInit () {
    if (this.hasInternational) {
      let langKeys = this.clientSettingsService.get('selectedLanguages');
      if (langKeys.length === 0) {
        langKeys = [this.clientSettingsService.defaultLanguage];
      }
      this.langKeys = langKeys;
    }
    const defaultLang = this.program.defaultLanguage ||
      this.clientSettingsService.defaultLanguage;
    this.formGroup = this.formBuilder.group<ProgramDetailsFormGroup>({
      name: [this.program.name || '', [
        Validators.required,
        Validators.maxLength(50)
      ]],
      description: [this.program.description || '', [
        Validators.required,
        Validators.maxLength(1000)
      ]],
      programLogo: [this.program.logo],
      backgroundImage: [this.program.image || '', Validators.required],
      timeZone: this.program.timezoneId ||
        this.clientSettingsService.clientSettings.defaultTimezone ||
        'UTC',
      hideCycleDatesInApplicantPortal: this.program.hideCycleDatesInApplicantPortal,
      defaultLang: this.hasInternational ?
        [defaultLang, Validators.required] :
        defaultLang
    });
    this.setProgramLogo();
    this.setBackgroundImage();
    this.updateValidation();
  }

  setName () {
    this.programService.setMapProperty(
      this.activeProgramId,
      'name',
      this.formGroup.value.name
    );
  }

  setDescription () {
    this.programService.setMapProperty(
      this.activeProgramId,
      'description',
      this.formGroup.value.description
    );
  }

  setProgramLogo () {
    const logo = this.formGroup.value.programLogo;
    if (logo) {
      if ((logo as YcFile).file) {
        this.programService.setMapProperty(
          this.activeProgramId,
          'logo',
          (logo as YcFile).file
        );
        this.fileService.convertFileToB64((logo as YcFile).file)
          .subscribe((base64: string) => {
            this.programService.setMapProperty(
              this.activeProgramId,
              'logoUrlOrBase64',
              base64
            );
            this.programLogoBase64 = base64;
          });
      } else {
        this.programService.setMapProperty(
          this.activeProgramId,
          'logo',
          logo
        );
        this.programLogo = this.program.logoUrlOrBase64 || logo;
        this.programLogoBase64 = null;
      }
    } else {
      this.programService.setMapProperty(
        this.activeProgramId,
        'logo',
        null
      );
      this.programService.setMapProperty(
        this.activeProgramId,
        'logoName',
        this.branding.logoName
      );
      this.programLogo = this.branding.logoUrl ||
        './assets/img/placeholders/default-program-image.jpg';
      this.programLogoBase64 = null;
    }
  }

  setTimeZone () {
    this.programService.setMapProperty(
      this.activeProgramId,
      'timezoneId',
      this.formGroup.value.timeZone
    );
    this.programService.setMapProperty(
      this.activeProgramId,
      'timeZoneUpdated',
      true
    );
  }

  setHideCycleDates () {
    this.programService.setMapProperty(
      this.activeProgramId,
      'hideCycleDatesInApplicantPortal',
      this.formGroup.value.hideCycleDatesInApplicantPortal
    );
  }

  setBackgroundImage () {
    const img = this.formGroup.value.backgroundImage;
    if (img) {
      if ((img as YcFile).file) {
        this.programService.setMapProperty(
          this.activeProgramId,
          'image',
          (img as YcFile).file
        );
        this.fileService.convertFileToB64((img as YcFile).file)
          .subscribe((base64: string) => {
            this.programService.setMapProperty(
              this.activeProgramId,
              'imageUrlOrBase64',
              base64
            );
            this.programBackgroundBase64 = base64;
          });
      } else {
        this.programService.setMapProperty(
          this.activeProgramId,
          'image',
          img
        );
        this.programBackground = this.program.imageUrlOrBase64 || img;
        this.programBackgroundBase64 = null;
      }
    } else {
      this.programService.setMapProperty(
        this.activeProgramId,
        'imageName',
        ''
      );
      this.programService.setMapProperty(
        this.activeProgramId,
        'image',
        ''
      );
      this.programBackground = './assets/img/placeholders/default-program-image.jpg';
      this.programBackgroundBase64 = null;
    }
  }

  setLanguage () {
    this.programService.setMapProperty(
      this.activeProgramId,
      'defaultLanguage',
      this.formGroup.value.defaultLang
    );
  }

  updateValidation () {
    if (this.program.draftValidityAlert || this.program.publishedValidityAlert) {
      if (!this.program.name) {
        this.markAsRequired('name');
      }
      if (!this.program.defaultLanguage) {
        this.markAsRequired('defaultLang');
      }
    }
    if (this.program.publishedValidityAlert) {
      if (!this.program.description) {
        this.markAsRequired('description');
      }
      if (!this.program.image) {
        this.markAsRequired('backgroundImage');
      }
    }
  }

  markAsRequired (controlName: keyof ProgramDetailsFormGroup) {
    this.formBuilderFactory.markAsRequired(this.formGroup, controlName);
  }

  ngOnDestroy () {
    this.sub.unsubscribe();
  }
}