import { expCharRegx, encodeCharRegx } from '../../../utils';
import { defaultSectors } from '../../../configuration/editor';

import '../less/badge.less';
import '../less/resizer.less';
import './stylemanager.less';

export default function (editor) {
  const styleManager = editor.StyleManager;

  const addSector = sectorId => {
    if (!styleManager.getSector(sectorId)) {
      styleManager.addSector(sectorId, defaultSectors[sectorId]);
    }
  }

  // 应用到页面的时候背景图片 异常处理
  let fileType = styleManager.getType('file')
  styleManager.addType('file', {
    model: fileType.model.extend({
      getFullValue: function (val) {
        const fn = this.get('functionName');
        let value = (val == null) ? this.get('value') : val;

        if (fn && !(value == null)) {
          if (fn === 'url') {
            value = value
              .replace(expCharRegx, function (v) { return "\\" + v })
              .replace(encodeCharRegx, function (v) {
                return encodeURIComponent(v)
              })
            value = `${fn}(${value})`;
          } else {
            value = `${fn}(${value})`;
          }
        }

        if (this.get('important')) {
          value = `${value} !important`;
        }

        return value || '';
      }
    })
  });

  editor.on('load', () => {
    // 将页面的 body 元素，对应编辑器中的 wrapper，的样式属性限制放开，可以设置所有样式属性
    editor.getWrapper().set('stylable', true);
  });

  editor.on('component:selected', (component) => {
    const sectors = component.getTrait('sectors') || Object.keys(defaultSectors);

    sectors.forEach(sectorId => addSector(sectorId));

    // 去掉 Style Manager 的 style 样式，grapesjs在初始化后，给properties加上了 style="display: block"，会覆盖通过类加上的样式
    $('.gjs-sm-property').removeAttr('style');
  });
}
