//check if canvas is in dark mode
const mode = context.styling.general.backgroundColor=="2A2A2A"?"dark":"other"

//revert a color. Takes “#AABBCC” color and returns the opposite
function invertHex(hex) {
  hex = hex.slice(1,hex.length)
  return "#" + (Number(`0x1${hex}`) ^ 0xFFFFFF).toString(16).substr(1).toUpperCase()
}

//Calculate the max value for an (string) axis from a set of (DataViewRow[]) rows.
//Null  values are treated as 0.
function maxValue(rows, axis) {
  return rows.reduce((p, c) => Math.max(+c.continuous(axis).value(), p), 0);
}

//Calculate the total sum value for an (string) axis from a set of (dataView)rows.
// Null values are treated as 0.
function sumValue(rows, axis) {
  return rows.reduce((p, c) => +c.continuous(axis).value() + p, 0);
}

//show progress indicator and hides after 5 seconds
mod.controls.progress.show()
setTimeout(mod.controls.progress.hide,5000)

//Check if analysis is in editing mode
context.isEditing

//Show error and hide it after 3 seconds
mod.controls.errorOverlay.show(["error 1","error 2"],"sample errors")
setTimeout(()=>{mod.controls.errorOverlay.hide("sample errors")},3000) 

//Show a menu at the middle of the screen
var isChecked = false
document.querySelector(".settings").onclick=()=>{
mod.controls.contextMenu.show(
  windowSize.height/2,windowSize.width/2,[
    {text:"menu 1",enabled:true},
    {text:"menu 2",enabled:false},
    {text:"menu 3",enabled:true,checked:isChecked}
  ]).then(clickedItem=>{
  if(clickedItem.text=="menu 3") isChecked=!isChecked
  console.log(clickedItem.text, clickedItem.checked)
})}

//Show a right-click-menu
var isChecked = false
document.querySelector("#mod-container").oncontextmenu=(e)=>{
  e.preventDefault()
  e.stopPropagation()
  mod.controls.contextMenu.show( e.clientX,e.clientY,[
    {text:"menu 1",enabled:true},
    {text:"menu 2",enabled:false},
    {text:"menu 3",enabled:true,checked:isChecked}
  ]).then(clickedItem=>{
    if(clickedItem.text=="menu 3") isChecked=!isChecked
    console.log(clickedItem.text, clickedItem.checked)
  })
}

//Creates a popout menu
let isChecked = false;
let { radioButton, checkbox, button } = mod.controls.popout.components
  let { section } = mod.controls.popout
document.querySelector(".settings").onclick = () => {
    let b1 = radioButton({ enabled: true, name: "myRadio", text: "a radio" })
  let b2 = checkbox({ enabled: true, name: "myChk", text: "a checkbox", checked: isChecked })
  let b3 = button({ enabled: true, name: "myBtn", text: "a button" })
    mod.controls.popout.show({ x: 0, y: 0, autoClose: true,
    onChange:(e)=>{if (e.name == "myChk" || e.name == "myBtn" )isChecked=!isChecked}
    }, () => [
    section({ heading: "section 1", children: [b1, b2] }),
    section({ heading: "section 2", children: [b3] })
  ])}
}

//marks a row
//markRow({category:"apples",val:33,color:"red"})
  async function markRow(d){
    dataView.clearMarking();
    (await dataView.allRows()).forEach((row,i)=>{
      let rowVal = row.categorical("Segment").value()[0].key
      if(d.category==rowVal) row.mark();
    })
  }

//Read a document property
  console.log((await mod.document.property("depth.blend.curve1")).value())


//read all document properties
(await mod.document.properties()).forEach(async (x, i) => { 
  console.log(i, x.name, await x.isList ? x.valueList() : x.value()) 
})

//get a list of properties from array
var props = ["FiscalYearOffset","MaxMissingTimeParts"]
Promise.all(props.map(async (p) => {
  return (await mod.document.property(p)).value()
})).then(v=>{
  //custom code here
  console.log(v)
})

  //read a mod property (await)
console.log((await mod.property("trackDocPropMappings")).value())

  //read a mod property (then)
mod.property("trackDocPropMappings").then(x=>{
    console.log(x.value());
});

  //assign mod property value (nested await) from async function (i.e render)
  var nt = await (await mod.property("trackVisibility")).value()

//Read color axis values
 //get Color axis values
 let colorAxisValues = [];
 let colorAxisName = "Color"; //or any other axis

 get Color axis
 let colorAxis = (await dataView.axes()).filter(ax=>{return ax.name==colorAxisName})[0];

 // get row values
 (await dataView.allRows()).forEach((row,i)=>{
    let aColorAxisValue = {}
    aColorAxisValue.color = row.color().hexCode;
    if (colorAxis.isCategorical){
      aColorAxisValue.value = row.categorical(colorAxisName).formattedValue()
     } else {
       aColorAxisValue.value = row.continuous(colorAxisName).value()
     }
    colorAxisValues.push(aColorAxisValue)
 }) 
 console.log(JSON.stringify(colorAxisValues,0,3))

//get visualization data table, data table column names and data types  
let visDataTable =  await mod.visualization.mainTable();
let visDataTableColumns = (await visDataTable.columns());
let visDataTableColNames = visDataTableColumns.map(a=>{return a.name})
let visDataTableColDataTypes = visDataTableColumns.map(a=>{return a.dataType.name})
console.log(visDataTable.name,visDataTableColNames,visDataTableColDataTypes);

//show or hide tooltip under your cursor when hovering over a dom element
//<div id="myDiv" style="height:100px;width:100px;background:yellow">hello</div>
constant myDiv = document.getElementById("myDiv")
myDiv.onmouseenter(e=>{mod.controls.tooltip.show(“hello there”)})
myDiv.onmouuseleave(mod.controls.tooltip.hide)

//Read a document property
  console.log((await mod.document.property("depth.blend.curve1")).value())

//read all document properties
(await mod.document.properties()).forEach(async (x, i) => { 
  console.log(i, x.name, await x.isList ? x.valueList() : x.value()) 
})

//get a list of properties from array
var props = ["FiscalYearOffset","MaxMissingTimeParts"]
Promise.all(props.map(async (p) => {
  return (await mod.document.property(p)).value()
})).then(v=>{
  //custom code here
  console.log(v)
})