const merge = require('merge-options');

const Sprite = require('./sprite');
const { generateSpriteTree, calculateSymbolPosition } = require('./utils');

class StackSprite extends Sprite {
  /**
   * @typedef {SpriteConfig} StackSpriteConfig
   * @property {string} usageClassName
   * @property {string} styles
   * @return {StackSpriteConfig}
   */
  static get defaultConfig() {
    return merge(super.defaultConfig, {
      usageClassName: 'sprite-symbol-usage',
      get styles() {
        return [
          `.${this.usageClassName} {display: none;}`,
          `.${this.usageClassName}:target {display: inline;}`
        ].join('\n');
      }
    });
  }

  /**
   * @return {Promise<PostSvgTree>}
   */
  generate() {
    const { symbols } = this;
    /** @type StackSpriteConfig */
    const config = this.config;

    return Promise.all(symbols.map(s => s.generate()))
      .then(symbolsTrees => {
        symbolsTrees.forEach(({ root }) => {
          root.tag = 'svg';
          root.attrs.class = config.usageClassName;
        });

        return generateSpriteTree({
          attrs: config.attrs,
          defs: [{
            tag: 'style',
            content: config.styles
          }],
          content: symbolsTrees
        });
      });
  }

  renderCss() {
    const { filename } = this.config;

    const css = this.symbols.map(s => {
      const { aspectRatio } = calculateSymbolPosition(s, this);
      return `
.${s.id}:before {
  display: block;
  padding-bottom: ${aspectRatio.toPercent()};
  background: url('${filename}#${s.id}') no-repeat;
  box-sizing: content-box;
  content: '';
}`;
    }).join('\n\n');

    return Promise.resolve(css);
  }
}

module.exports = StackSprite;

@@ -100,33 +100,8 @@
 Tree
-, calculateSymbolPosition
  %7D =
@@ -1238,422 +1238,8 @@
 %0A  %7D
-%0A%0A  renderCss() %7B%0A    const %7B filename %7D = this.config;%0A%0A    const css = this.symbols.map(s =%3E %7B%0A      const %7B aspectRatio %7D = calculateSymbolPosition(s, this);%0A      return %60%0A.$%7Bs.id%7D:before %7B%0A  display: block;%0A  padding-bottom: $%7BaspectRatio.toPercent()%7D;%0A  background: url('$%7Bfilename%7D#$%7Bs.id%7D') no-repeat;%0A  box-sizing: content-box;%0A  content: '';%0A%7D%60;%0A    %7D).join('%5Cn%5Cn');%0A%0A    return Promise.resolve(css);%0A  %7D
 %0A%7D%0A%0A

drop redundant method