import { Injectable } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
import { AuthService } from '../../../auth/auth.service';
import { ComponentEntity } from '../entity/component.entity';
import { HtmlBuilderSettingService } from '../html-builder-setting.service';
import { LessService } from '../utils/less.service';

@Injectable({
  providedIn: 'root',
})
export class ComponentMakerService {

  // 组件id，由时间戳生产
  public componentId: string | number;
  // 组件名
  public componentName: string;
  // 组件模板
  public componentTemplate: string;
  // 组件less
  public componentLess: string;
  // 开发环境嵌入用的style标签
  public safeStyleTag: SafeHtml;
  // 组件渲染后的html
  public componentHtml: string;
  // 组件渲染后的css
  public componentCss: string;
  // 组件属性
  public componentData: ComponentEntity;

  constructor(
    private less: LessService,
    private sanitizer: DomSanitizer,
    private authService: AuthService,
    public settingService: HtmlBuilderSettingService,
  ) {
    this.componentId = new Date().getTime();
    this.init();
  }

  /**
   * 初始化
   */
  public init() {
    this.componentTemplate = this.settingService.componentTemplateDef;
    this.componentLess = this.settingService.componentLessDef;
    this.componentData = {
      template: '',
      cid: this.componentId,
      formData: {},
      usr: this.authService.user.name,
    };
    this.lessToCss();
    this.templateToHtml();
  }

  /**
   * less转成css
   */
  public lessToCss() {
    // 嵌入到模拟器中
    this.less.render(this.componentLess).then((output) => {
      this.componentCss = output.css;
      this.safeStyleTag = this.sanitizer.bypassSecurityTrustHtml(`<style>${output.css}</style>`);
    }, () => { });
  }

  /**
   * 组件模板转html
   */
  public templateToHtml() {
    this.componentHtml = this.componentTemplate;
    this.componentData.formData = {};
    // 解析组件属性字符串：正则
    const props = this.componentTemplate.match(this.settingService.regexProp);
    props.forEach((prop) => {
      const propNameMatch = prop.match(this.settingService.regexPropName);
      const propCommentMatch = prop.match(this.settingService.regexPropComment);
      if (propNameMatch) {
        const propName = propNameMatch[0].replace(/##/g, '');
        const propText = prop.replace(/({{|}}|##.+##|@@.+@@)/g, '');
        this.componentData.formData[propName] = propText;
        if (propCommentMatch) {
          this.componentData.formData[propName + '@comment'] = propCommentMatch[0].replace(/@@/g, '');
        }
        this.componentHtml = this.componentHtml.replace(prop, propText);
      }
    });
    // console.log(this.componentData);
  }

  /**
   * 保存组件
   */
  public saveComponent() {
    console.log(this.componentTemplate, this.componentHtml, this.componentLess, this.componentCss);
  }

}