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, symbolId) {
	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

		let id = symbol.getAttribute("id")
		if (symbolId) {
			id = symbolId(id)
			symbol.setAttribute("id", id)
		}

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

		// Append elements
		svg.appendChild(svgView)
		svg.appendChild(svgUse)

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

	const svgStr = svg.outerHTML.replaceAll("viewbox", "viewBox") /* JSDOM will lower-case all attributes */
	return svgStr
}


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

	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, this.symbolId)

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

module.exports = SVGSymbolAtlasViewPlugin