import { Component, OnInit } from '@angular/core';
import { ClientSettingsPages } from '@core/typings/brand.typing';
import { FileService, PanelTypes, TypeSafeFormBuilder, TypeSafeFormGroup, YcFile } from '@yourcause/common';
import { ClientSettingsService } from '../client-settings.service';
interface LogoGroup {
  logo: string|YcFile;
}

@Component({
  selector: 'gc-logo-page',
  templateUrl: './logo-page.component.html',
  styleUrls: ['./logo-page.component.scss']
})
export class LogoPageComponent implements OnInit {
  type = ClientSettingsPages.LOGO;
  PanelTypes = PanelTypes;
  logoFormGroup: TypeSafeFormGroup<LogoGroup>;

  constructor (
    private clientSettingsService: ClientSettingsService,
    private formBuilder: TypeSafeFormBuilder,
    private fileService: FileService
  ) { }

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

  get configureSettingsMap () {
    return this.clientSettingsService.configureSettingsMap;
  }

  ngOnInit () {
    this.logoFormGroup = this.formBuilder.group<LogoGroup>({
      logo: this.clientSettingsService.configureSettingsMap.logoUrl
    });
  }

  setLogoUrl () {
    const file = this.logoFormGroup.value.logo as YcFile;
    this.fileService.convertFileToB64(file.file)
      .subscribe((base64) => {
        this.clientSettingsService.setConfigureMap({
          ...this.configureSettingsMap,
          file,
          logoUrl: base64,
          logoChanged: true
        });
      });
  }

}