import {relative} from 'node:path';
import gulp from 'gulp';
{{#if (calc spriteType '===' 'svg')}}
import buildSprite from '@hidoo/gulp-task-build-sprite-svg';
{{/if}}
{{#if (calc spriteType '===' 'image')}}
import buildSprite from '@hidoo/gulp-task-build-sprite-image';
{{/if}}
import * as config from '../config.js';

/**
 * url parameter for browser cache
 *
 * @type {String}
 */
const cacheParameter = process.env.NODE_ENV === 'development' ?
  '' : `?version=${config.pkg.version}`;

/**
 * relative path from css to sprite
 *
 * @type {String}
 */
{{#if multiDevice}}
const pathToSpriteDesktop = relative(
  config.path.destCssDesktop,
  config.path.destSpriteDesktop
);
const pathToSpriteMobile = relative(
  config.path.destCssMobile,
  config.path.destSpriteMobile
);
{{else}}
const pathToSprite = relative(config.path.destCss, config.path.destSprite);
{{/if}}

{{#if multiDevice}}
/**
 * return merged build options for desktop
 *
 * @param {Object} options build task options
 * @return {Object}
 */
function buildDesktopOptions(options = {}) {
  return {
    ...options,
    destImg: config.path.destSpriteDesktop,
    destCss: config.path.srcCssDesktop,
    imgPath: `${pathToSpriteDesktop}/${options.imgName}${cacheParameter}`,
    cssPreprocessor: '{{#if (calc (or cssPreprocessor '') '===' 'sass')}}sass:module{{else}}stylus{{/if}}',
    compress: config.compress
  };
}

/**
 * return merged build options for mobile
 *
 * @param {Object} options build task options
 * @return {Object}
 */
function buildMobileOptions(options = {}) {
  return {
    ...options,
    destImg: config.path.destSpriteMobile,
    destCss: config.path.srcCssMobile,
    imgPath: `${pathToSpriteMobile}/${options.imgName}${cacheParameter}`,
    cssPreprocessor: '{{#if (calc (or cssPreprocessor '') '===' 'sass')}}sass:module{{else}}stylus{{/if}}',
    compress: config.compress
  };
}
{{else}}
/**
 * return merged build options
 *
 * @param {Object} options build task options
 * @return {Object}
 */
function buildOptions(options = {}) {
  return {
    ...options,
    destImg: config.path.destSprite,
    destCss: config.path.srcCss,
    imgPath: `${pathToSprite}/${options.imgName}${cacheParameter}`,
    cssPreprocessor: '{{#if (calc (or cssPreprocessor '') '===' 'sass')}}sass:module{{else}}stylus{{/if}}',
    compress: config.compress
  };
}
{{/if}}

{{#if multiDevice}}

  // define main task
  const mainDesktop = buildSprite(buildDesktopOptions({
    name: 'sprite:desktop:main',
    src: `${config.path.srcSpriteDesktop}/**/sample-*.{{#if (calc spriteType '===' 'svg')}}svg{{/if}}{{#if (calc spriteType '===' 'image')}}png{{/if}}`,
    imgName: 'sample.{{#if (calc spriteType '===' 'svg')}}svg{{/if}}{{#if (calc spriteType '===' 'image')}}png{{/if}}',
    cssName: '_sprite_sample.{{#if (calc (or cssPreprocessor '') '===' 'sass')}}scss{{else}}styl{{/if}}',
    {{#if (calc spriteType '===' 'image')}}
      evenize: false,
    {{/if}}
  }));
  const mainMobile = buildSprite(buildMobileOptions({
    name: 'sprite:mobile:main',
    src: `${config.path.srcSpriteMobile}/**/sample-*.{{#if (calc spriteType '===' 'svg')}}svg{{/if}}{{#if (calc spriteType '===' 'image')}}png{{/if}}`,
    imgName: 'sample.{{#if (calc spriteType '===' 'svg')}}svg{{/if}}{{#if (calc spriteType '===' 'image')}}png{{/if}}',
    cssName: '_sprite_sample.{{#if (calc (or cssPreprocessor '') '===' 'sass')}}scss{{else}}styl{{/if}}',
    {{#if (calc spriteType '===' 'image')}}
      evenize: false,
    {{/if}}
  }));

  // define watch task
  const watchDesktop = () => {
    gulp.watch(
      [
        `${config.path.srcSpriteDesktop}/**/sample-*.{{#if (calc spriteType '===' 'svg')}}svg{{/if}}{{#if (calc spriteType '===' 'image')}}png{{/if}}`
      ],
      mainDesktop
    );
  };
  const watchMobile = () => {
    gulp.watch(
      [
        `${config.path.srcSpriteMobile}/**/sample-*.{{#if (calc spriteType '===' 'svg')}}svg{{/if}}{{#if (calc spriteType '===' 'image')}}png{{/if}}`
      ],
      mainMobile
    );
  };

  // export tasks
  export const desktop = {
    main: mainDesktop,
    watch: watchDesktop
  };
  export const mobile = {
    main: mainMobile,
    watch: watchMobile
  };

{{else}}

  // define main task
  export const main = buildSprite(buildOptions({
    name: 'sprite:main',
    src: `${config.path.srcSprite}/**/sample-*.{{#if (calc spriteType '===' 'svg')}}svg{{/if}}{{#if (calc spriteType '===' 'image')}}png{{/if}}`,
    imgName: 'sample.{{#if (calc spriteType '===' 'svg')}}svg{{/if}}{{#if (calc spriteType '===' 'image')}}png{{/if}}',
    cssName: '_sprite_sample.{{#if (calc (or cssPreprocessor '') '===' 'sass')}}scss{{else}}styl{{/if}}',
    {{#if (calc spriteType '===' 'image')}}
      evenize: false,
    {{/if}}
  }));

  // define watch task
  export const watch = () => {
    gulp.watch(
      [
        `${config.path.srcSprite}/**/sample-*.{{#if (calc spriteType '===' 'svg')}}svg{{/if}}{{#if (calc spriteType '===' 'image')}}png{{/if}}`
      ],
      main
    );
  };

{{/if}}