-- Generate a pseudo-3D image viewer
-- If you have a picture of an object from multiple angles this
-- lets users click through them.

-- Similar to User:Bawolff/earth_rotation except using separate images instead of a sprite sheet.
local p = {}
local heightCache

local function getStart( axis, frame )
	return tonumber(frame.args['start'..axis] or 0)
end

local function getButton( frame, imageList, dir )
	local buttonText, formula, forId, disableFormula, startHidden
	startDisabled = false
	if dir == 'up' then
		buttonText = frame.args['uptext'] or '↑'
		if #imageList < 2 then
			return ''
		end
		forId = 'y'
		formula = '(y+1)%' .. (#imageList)
		if frame.args['wrapVertical'] == 'false' then
			disableFormula = 'ifgreaterorequal(y,' .. (#imageList-1) .. ')'
		end
		if getStart('Y',frame) == #imageList-1 then
			startDisabled = true
		end
	elseif dir == 'down' then
		buttonText = frame.args['downtext'] or '&darr;'
		if #imageList < 2 then
			return ''
		end
		forId = 'y'
		formula = '(y-1+'.. #imageList .. ')%' .. (#imageList)
		if frame.args['wrapVertical'] == 'false' then
			disableFormula = 'ifzero(y)'
		end
		if getStart('Y',frame) == 0 then
			startDisabled = true
		end
	elseif dir == 'right' then
		buttonText = frame.args['lefttext'] or '&rarr;'
		if #imageList[1] < 2 then
			return ''
		end
		forId = 'x'
		formula = '(x+1)%' .. (#imageList[1])
		if frame.args['wrapHorizontal'] == 'false' then
			disableFormula = 'ifgreaterorequal(x,' .. (#imageList[1]-1) .. ')'
		end
		if getStart('X',frame) == #imageList[1]-1 then
			startDisabled = true
		end
	elseif dir == 'left' then
		buttonText = frame.args['righttext'] or '&larr;'
		if #imageList[1] < 2 then
			return ''
		end
		forId = 'x'
		formula = '(x-1+'.. #imageList[1] .. ')%' .. (#imageList[1])
		if frame.args['wrapHorizontal'] == 'false' then
			disableFormula = 'ifzero(x)'
		end
		if getStart('X',frame) == 0 then
			startDisabled = true
		end
	else
		error( "Unrecognized direction" )
	end

	local button = frame:expandTemplate{
		title = 'Calculator button',
		args = {
			type = 'default',
			["for"] = forId,
			contents = buttonText,
			formula = formula
		}
	}
	-- TODO: Change from hidden buttons to using the disabled= option on the button formula.
	if disableFormula ~= nil then
		button = frame:expandTemplate{
			title = 'calculator-hideifzero',
			args = {
				text = button,
				formula = 'not(' .. disableFormula .. ')',
				starthidden = startDisabled
			}
		} .. frame:expandTemplate{
			title = 'calculator-hideifzero',
			args = {
				text = frame:expandTemplate{
					title = 'Calculator button',
					args = {
						type = 'default',
						contents = buttonText,
						disabled = '1'
					}
				},
				formula = disableFormula,
				starthidden = not startDisabled
			}
		}
	end
	return button
end

-- We assume all images have roughly the same aspect ratio
local function getHeight(frame, imageList)
	if frame.args['height'] then
		return frame.args['height']
	end

	if heightCache == nil then
		local title = mw.title.new( imageList[1][1], 'File' )
		assert( title and title.file, "Invalid file")
		heightCache = math.ceil((tonumber(frame.args['width']) or 250) * (title.file.height/title.file.width))
	end
	return heightCache
end

local function parseImageList( images )
	local imageList = {}
	local rows = mw.text.split( mw.text.trim( images ), "\n%-+\n" )
	local width, height
	for i, v in ipairs( rows ) do
		row = mw.text.split( mw.text.trim( v ), "\n+" )
		imageList[#imageList+1] = row
		if width == nil then
			width = #row
			assert( width >= 1, "Must have at least one column of images" )
		else
			assert( width == #row, "Must have a square matrix of images" )
		end
	end
	assert( #imageList >= 1, "Must have at least one row of images" )
	return imageList
end

local function getImages(frame, imageList)
	local html = mw.html.create( 'div' )
	html
		:css( 'width', (frame.args['width'] or 250) .. 'px' )
		:css( 'height', getHeight(frame, imageList) .. 'px' )
		:css( 'position', 'relative' )

	for imgRowNumb, imgRow in ipairs( imageList ) do
		for imgColNumb, img in ipairs( imgRow ) do
			local zDefault = 0
			if (imgColNumb-1 == getStart('X',frame)) and (imgRowNumb-1 == getStart('Y',frame)) then
				zDefault = 1
			end
			local formula = 'ifequal(x,' .. (imgColNumb-1) .. ','
				.. 'ifequal(y,' .. (imgRowNumb-1) .. '))'
			html:tag( 'div' )
				:css( 'position', 'absolute' )
				:css( 'background', frame.args['background'] or '#fff' )
				:css( 'width', (frame.args['width'] or 250) .. 'px' )
				:css( 'height', getHeight(frame, imageList) .. 'px' )
				:css( 'z-index', 'var( --calculator-x' .. (imgColNumb-1) .. 'y' .. (imgRowNumb-1) .. ',' .. zDefault .. ')')
				:wikitext( frame:preprocess(
					'[[File:' .. img .. '|' .. (frame.args['width'] or 250) .. 'x' .. getHeight(frame,imageList) .. 'px]]' ..
					'{{calculator|type=hidden|id=x' .. (imgColNumb-1) .. 'y' .. (imgRowNumb-1) .. '|formula=' .. formula .. '|default=' .. zDefault .. '}}'
				) )
		end
	end
	if frame.args.fallbackImage then
		html:tag( 'div' )
			:css( 'position', 'absolute' )
			:css( 'background', frame.args['background'] or '#fff' )
			:css( 'width', (frame.args['width'] or 250) .. 'px' )
			:css( 'height', getHeight(frame, imageList) .. 'px' )
			:css( 'z-index', '3')
			:addClass( 'calculatorgadget-fallback' ) -- if calc enabled with will be display:none
			:wikitext( frame:preprocess(
				'[[File:' .. frame.args.fallbackImage .. '|' .. (frame.args['width'] or 250) .. 'x' .. getHeight(frame,imageList) .. 'px]]'
			) )
	end
	return tostring(html)
end

function p.makeViewer(frame)
	local pFrame = frame:getParent()
	local args = pFrame.args
	local width = args['width'] or 250
	assert( args['images'], "Images argument required")
	local imageList = parseImageList( args['images'] )

	local descId = mw.uri.anchorEncode( 'spatialviewer-desc-' .. imageList[1][1] )
	local html = mw.html.create( 'div' )
	html:addClass( 'spatialviewer calculator-container' )
	-- TODO dark mode support. We set an explicit background to make sure that if some of the images
	-- are different dimensions or transparent they don't show through each other. This messes up some
	-- dark mode related styles
	html:addClass( 'notheme' )
	html:attr( 'aria-describedby', descId )
	html:cssText( args['style'] )
	html:css( 'float', args['float'] )
		:css( 'display', 'grid' )
		:css( 'width', 'max-content' )
		:css( 'grid-template-columns', 'min-content ' .. width .. 'px min-content' )
		:css( 'border', '1px var(--border-color-base,#a2a9b1) solid' )
		:css( 'padding', '0.5em' )
		:css( 'gap', '3px' )
		:css( 'background', args['background'] or '#fff' ) -- Should this be var(--background-color-base, '#fff') ?

	html:tag('div')
		:addClass( 'calculator-skip-link' )
		:css( 'grid-column', '1/4' )
		:wikitext( '[[#' .. descId .. '|Skip image slideshow]]' )
		:wikitext( frame:extensionTag{ name = 'templatestyles', content = '', args = { src = 'Module:Spatial image viewer/skip.css' } } )

	html:tag( 'div' )
		:css( 'display', 'none' ) -- Only display if calculator gadget enabled
		:addClass( 'calculatorgadget-enabled' )
		:css( 'grid-column', '1/4' )
		:css( 'margin', 'auto' )
		:wikitext(
			getButton( pFrame, imageList, 'up' )
		)

	html:tag( 'div' )
		:css( 'display', 'none' ) -- Only display if calculator gadget enabled
		:addClass( 'calculatorgadget-enabled' )
		:css( 'margin-top', 'auto' )
		:css( 'margin-bottom', 'auto' )
		:wikitext(
			getButton( pFrame, imageList, 'left' )
		)

	html:tag( 'div' )
		:css( 'grid-column', 2 ) -- Important for the no-js case where other items hidden.
		-- Wikipedia App modifies HTML in some unclear way which causes the intrinsic height to be incorrect
		-- so explicitly set a height here.
		:css( 'min-height', getHeight(pFrame, imageList) .. 'px' )
		:wikitext(
			getImages( pFrame, imageList )
		)

	html:tag( 'div' )
		:css( 'display', 'none' ) -- Only display if calculator gadget enabled
		:addClass( 'calculatorgadget-enabled' )
		:css( 'margin-top', 'auto' )
		:css( 'margin-bottom', 'auto' )
		:wikitext(
			getButton( pFrame, imageList, 'right' )
		)

	html:tag( 'div' )
		:css( 'display', 'none' ) -- Only display if calculator gadget enabled
		:addClass( 'calculatorgadget-enabled' )
		:css( 'grid-column', '1/4' )
		:css( 'margin', 'auto' )
		:wikitext(
			getButton( pFrame, imageList, 'down' )
		)
	if args.caption then 
		html:tag( 'div' )
			:css( 'grid-column', '1/4' )
			:css( 'border-top', '1px solid #eaecf0' ) -- caption styles could probably be improved
			:css( 'margin-top', '0.5em' )
			:css( 'padding-top', '0.5em' )
			:attr( 'id', descId )
			:wikitext( frame:preprocess( args.caption ) )
	end
	html:wikitext(
		frame:preprocess(
			'{{calculator|id=x|type=hidden|default=' .. getStart('X',pFrame) .. '}}' ..
			'{{calculator|id=y|type=hidden|default=' .. getStart('Y',pFrame) .. '}}'
		)
	)

	return tostring(html)
end
return p