const fs = require("fs")
const path = require("path")
//const svgSprite = require("svg-sprite")
const { JSDOM } = require("jsdom")
//const { optimize } = require("svgo")
const { RawSource } = require("webpack-sources")

// Generate <view>'s for referencing sprites in css
function generateAtlasViews(svgFile) {
	const dom = new JSDOM(svgFile)
	const document = dom.window.document
	const svg = document.querySelector("svg")

	const symbols = document.querySelectorAll("symbol")
	const width = 24
	const height = 24
	let row = 0
	let col = 0
	const totalCols = Math.floor(Math.sqrt(symbols.length))
	for (const symbol of symbols) {
		const x = col*width
		const y = row*height
		const id = symbol.getAttribute("id")

		// Create elements
		const view = document.createElement("view")
		view.setAttribute("id", `${id}-view`)
		view.setAttribute("viewBox", `0 0 ${x} ${y}`)
		const svgSprite = document.createElement("svg")
		svgSprite.setAttribute("width", width)
		svgSprite.setAttribute("height", height)
		svgSprite.setAttribute("viewBox", "0 -960 960 960")
		svgSprite.setAttribute("x", x)
		svgSprite.setAttribute("y", y)
		const svgUse = document.createElement("use")
		svgUse.setAttribute("href", `#${id}`)

		// Append elements
		svgSprite.appendChild(svgUse)
		svg.appendChild(view)
		svg.appendChild(svgSprite)

		// Adjust row/col
		col++
		if (col > totalCols) {
			col = 0
			row++
		}
	}
	svg.setAttribute("viewBox", `0 0 ${(totalCols+1)*width} ${(row+1)*height}`)

	return svg.outerHTML
}


class SVGSymbolAtlasViewPlugin {
	constructor(options = {}) {
		this.suffix = options.suffix || ".svg"
	}

	apply(compiler) {
		compiler.hooks.thisCompilation.tap("SVGSymbolAtlasViewPlugin", (compilation) => {
			compilation.hooks.processAssets.tap(
				{
					name: "SVGSymbolAtlasViewPlugin",
					stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE,
				},
				(assets) => {
					for (const assetName in assets) {
						if (assetName.endsWith(this.suffix)) {
							const originalSVG = assets[assetName].source().toString()
							const atlasSVG = generateAtlasViews(originalSVG)

							// Replace old SVG asset with new SVG
							compilation.updateAsset(assetName, new RawSource(atlasSVG))
						}
					}
				}
			)
		})
	}
}

module.exports = SVGSymbolAtlasViewPlugin