import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { FormDefinitionComponent, FormValueChange } from '@features/configure-forms/form.typing';
import { TypeSafeFormBuilder, TypeSafeFormGroup } from '@yourcause/common';
import { DomService } from '@yourcause/common/dom';
import DOMPurify from 'dompurify';
interface ContentGroup {
  [x: string]: string;
}

@Component({
  selector: 'gc-content',
  templateUrl: './gc-content.component.html',
  styleUrls: ['./gc-content.component.scss']
})
export class GcContentComponent implements OnInit {
  @Input() html: string;
  @Input() isContentEditMode: boolean;
  @Input() isFormBuilderView: boolean;
  @Output() onValueChange = new EventEmitter<FormValueChange>();

  // To display this component outside of formio, pass in formioComponent
  @Input() formioComponent: FormDefinitionComponent;

  data: never;
  formGroup: TypeSafeFormGroup<ContentGroup>;
  ckeditorConfig: CKEDITOR.config;
  // Allows "target" to remain on links in content component
  domPurifyConfig: DOMPurify.Config = {
    ADD_ATTR: ['target']
  };

  constructor (
    private formBuilder: TypeSafeFormBuilder,
    private domService: DomService
  ) { }

  get comp () {
    return this.formioComponent;
  }

  ngOnInit () {
    if (this.comp) {
      this.comp.validate.required = false;
      this.html = this.replaceRgb();
      this.html = this.replaceHttp();
      const stylesheets = this.domService.lookForStylesheets(
        ['bootstrap', 'main', 'styles']
      );
      this.ckeditorConfig = {
        allowedContent: true,
        contentsCss: stylesheets,
        bodyClass: 'yc-layout theme-yc-default',
        removeButtons: ['Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField', 'About', 'Subscript', 'Superscript', 'Language'].join(',')
      };
      this.formGroup = this.formBuilder.group({
        [this.comp.key]: this.html
      });
    }
  }

  replaceHttp () {
    return this.html.replace(new RegExp('http://', 'g'), 'https://');
  }

  replaceRgb () {
    return (this.html || '').replace(/\srgb\(([0-9]{1,3}(,\ )?){3}\)/g, (match) => {
      const numbers = match.match(/[0-9]{1,3}/g);

      return this.getHexFromRgb(
        +numbers[0],
        +numbers[1],
        +numbers[2]
      );
    });
  }

  getHex (num: number) {
    let hex = Number(num).toString(16);
    if (hex.length < 2) {
      hex = '0' + hex;
    }

    return hex;
  }

  getHexFromRgb (red: number, green: number, blue: number) {
    return `#${this.getHex(red)}${this.getHex(green)}${this.getHex(blue)}`;
  }

  onChange (value: string) {
    this.html = value;
    this.comp.html = value;
    this.onValueChange.emit({
      value,
      updateFormGroup: false
    });
  }
}