local p = {}

function p.hidden(frame)
    
    local id = mw.getCurrentFrame():getParent().args['id'] or ""
    local mode = mw.getCurrentFrame():getParent().args['mode'] or "right"
    local expandSymbol = mw.getCurrentFrame():getParent().args['expand-symbol'] or "⊞"
    local collapseSymbol = mw.getCurrentFrame():getParent().args['collapse-symbol'] or "⊟"
    local expandText = mw.getCurrentFrame():getParent().args['expand-text'] or ""
    local collapseText = mw.getCurrentFrame():getParent().args['collapse-text'] or ""
    local initialStateExpanded = mw.getCurrentFrame():getParent().args['expanded'] or "false"
    if mw.getCurrentFrame():getParent().args['expand-symbol'] == "none" then
        expandSymbol = expandText
    else
    	expandSymbol = expandSymbol .. expandText
    end
    if mw.getCurrentFrame():getParent().args['collapse-symbol'] == "none" then
        collapseSymbol = collapseText
    else
		collapseSymbol = collapseSymbol .. collapseText
    end
    
    -- default is content collapsed
    local contentState = " mw-collapsed" -- class to collapse content at start
    local collapseSymbolState = " mw-collapsed"
    local expandSymbolState = ""
    if initialStateExpanded  == "true" or initialStateExpanded  == "yes" then
       contentState = ""
       collapseSymbolState =  ""
       expandSymbolState = " mw-collapsed" 
    end
    	
	
    -- collapsible element containing the EXPAND SYMBOL and/or text
    --local expandSymbolString = '<td class="nomobile" style="padding:0 0 0.0em 0;">'  -- mobile exclusion no longer necessary
    local expandSymbolString = '<td style="padding:0 0 0.0em 0;">' 
                .. '<div class="mw-collapsible' .. expandSymbolState .. '" id="mw-customcollapsible-expandSymbol' .. id .. '">'
                .. '<div class="mw-collapsible-content mw-customtoggle-expandSymbol' .. id .. '">'
                .. '<div class="mw-customtoggle-myClade' .. id 
                ..             ' mw-customtoggle-collapseSymbol' .. id 
                ..             ' mw-customtoggle-expandSymbol' .. id 
                ..    '" style="font-size:100%;">' .. expandSymbol .. '</div>'
                .. '</div></div></td>'
    
    -- collapsible element containing the CLADE CONTENT 
    local clade = require( 'Module:Clade' )
    local contentString = '<td style="padding:0;" class="clade-interactive" >'
                .. '<div class="mw-collapsible' .. contentState .. '" id="mw-customcollapsible-myClade' .. id .. '>'
                .. '<div class="mw-collapsible-content mw-customtoggle-NOT_ON_CONTENT" >' -- don't toggle on the content
                
                .. '\n' .. clade.main(frame)  -- important to start wikitext tables on new line
                .. '</div></div></td>'
    
    -- collapsible element containing the COLLAPSE SYMBOL and/or text
    --local collapseSymbolString = '<td class="nomobile" style="padding:0 0 0.0em 0;">' -- mobile exclusion no longer necessary
    local collapseSymbolString = '<td style="padding:0 0 0.0em 0;">'
                .. '<div class="mw-collapsible' .. collapseSymbolState .. '" id="mw-customcollapsible-collapseSymbol' .. id .. '">'
                .. '<div class="mw-collapsible-content mw-customtoggle-collapseSymbol' .. id .. '" >'
                .. '<span class="mw-customtoggle-expandSymbol' .. id 
                            .. ' mw-customtoggle-myClade' .. id 
                            .. ' mw-customtoggle-collapseSymbol' .. id 
                            .. ' " style="font-size:100%;" >' .. collapseSymbol .. '</span>'
                            .. '</div></div></td>'


	local tableStyle = frame.args.style or ""
	if tableStyle == '{{{style}}}' then tableStyle = "" end
 	local cladeString = '<table style="border-spacing:0;margin:0;'..tableStyle ..'"><tr>'
    cladeString = cladeString .. expandSymbolString 
    if mode == "left" then
    	cladeString = cladeString .. collapseSymbolString
    end
    cladeString = cladeString .. contentString 
    if mode == "right" then
    	cladeString = cladeString .. collapseSymbolString
    end
    -- Note: if we want collapse string left and right it needs an extra element with a different id
    cladeString = cladeString ..  '</tr></table>'


return p.templateStyle( frame, "Clade hidden/styles.css" ) .. cladeString
end

function p.toggle(frame)
	
	if 1==2 then return 'some text' end
	
	--local toggleSymbol = 'toggle all'
	local toggleSymbol = mw.getCurrentFrame():getParent().args['button'] or ""

	local toggleString = '<div class="'
                
    local i=0
    while 	i < 20 do  -- limit on number of toggle elements controlled by the trigger button
    	i = i + 1 -- so we start with 1
		local target = mw.getCurrentFrame():getParent().args['id'..tostring(i)] 
	    
	    -- add classes for the three elements of each target: expand symbol, collapse symbol and contents
	    if target ~= nil then
            toggleString = toggleString .. ' mw-customtoggle-myClade' .. target 
                ..             ' mw-customtoggle-collapseSymbol' .. target 
                ..             ' mw-customtoggle-expandSymbol' .. target 
        end
    end
  
 
 toggleString = toggleString  ..  '">' .. toggleSymbol .. '</div>'

  return toggleString
end


-- <templatestyles src="Clade hidden/styles.css"></templatestyles>
function p.templateStyle( frame, src )
   return frame:extensionTag( 'templatestyles', '', { src = src } );
end

return p