////// Start Prompt//////////

function getPrompt(){
  const prompt = document.getElementById('taPrompt').value
  return prompt
}

function autoFillInPrompt(prompt_value){
  document.getElementById('taPrompt').value = prompt_value
}

////// End Prompt//////////

////// Start Negative Prompt//////////

function getNegativePrompt(){
  const negative_prompt = document.getElementById('taNegativePrompt').value
  return negative_prompt
}

function autoFillInNegativePrompt(negative_prompt_value){
  document.getElementById('taNegativePrompt').value = negative_prompt_value
}

////// End Negative Prompt//////////



////// Start Width//////////


document.getElementById('slWidth').addEventListener('input', evt => {
  const width = evt.target.value * 64
  document.getElementById('lWidth').textContent = width
})

function getWidth(){
  slider_width = document.getElementById('slWidth').value
  const width = slider_width * 64
  return width 
}

function autoFillInWidth(width_value){
  document.getElementById('slWidth').value = `${width_value / 64}`
  //update the label
  document.getElementById('lWidth').innerHTML = `${width_value}`
}
////// End Width//////////

////// Start Height//////////


document.getElementById('slHeight').addEventListener('input', evt => {
  const height = evt.target.value * 64
  document.getElementById('lHeight').textContent = height
})

function getHeight(){
  slider_value = document.getElementById('slHeight').value
  const height = slider_value * 64
  return height 
}

function autoFillInHeight(height_value){
  document.getElementById('slHeight').value = `${height_value / 64}`
  //update the label
  document.getElementById('lHeight').innerHTML = `${height_value}`
}
////// End Height//////////


////// Start Denoising Strength//////////
document.querySelector('#slDenoisingStrength').addEventListener('input', evt => {
  const label_value = evt.target.value / 100
  // console.log("label_value: ", label_value)
  document.getElementById('lDenoisingStrength').innerHTML = `${label_value}`

})

//get the value that is relevant to stable diffusion
function getDenoisingStrength () {
  const slider_value = document.getElementById('slDenoisingStrength').value
  const denoising_strength_value = slider_value / 100.0
  return denoising_strength_value
}

// display the value the user need to see in all elements related to denoising strength attribute
function autoFillInDenoisingStrength (denoising_strength_value) {
  //update the slider
  document.getElementById('slDenoisingStrength').value = `${
    denoising_strength_value / 100
  }`
  //update the label
  document.getElementById(
    'lDenoisingStrength'
  ).innerHTML = `${denoising_strength_value}`
}

////// End Denoising Strength//////////


////// Start Hi Res Fix//////////



//get the value that is relevant to stable diffusion
function getHiResFixs() {
  const isChecked = document.getElementById('chHiResFixs').checked
  return isChecked
}

function setHiResFixs(isChecked) {
  document.getElementById('chHiResFixs').checked = isChecked
}


function sliderAddEventListener(slider_id,label_id,multiplier){
  document.getElementById(slider_id).addEventListener('input', evt => {
    const sd_value = evt.target.value * multiplier // convert slider value to SD ready value
    document.getElementById(label_id).textContent = sd_value
  })
}

//get the stable diffusion ready value from the slider with  "slider_id"
function getSliderSdValue(slider_id,multiplier){
  const slider_value = document.getElementById(slider_id).value
  const sd_value = slider_value * multiplier
  return sd_value 
}
function autoFillInSliderUi(sd_value,slider_id,label_id,multiplier){
  //update the slider
  document.getElementById(slider_id).value = `${sd_value * multiplier}`
  //update the label
  document.getElementById(label_id).innerHTML = `${sd_value}`
}

//hrWidth is from [1 to 32] * 64 => [64 to 2048]  
sliderAddEventListener('hrWidth', 'hWidth',64)
sliderAddEventListener('hrHeight', 'hHeight',64)

//convert hrDenoisingStrength  from  [1, 100] * 0.01 => [0.01 to 1]
sliderAddEventListener('hrDenoisingStrength','hDenoisingStrength',0.01)



function autoFillInHiResFixs(firstphase_width,firstphase_height) {
  
  //update the firstphase width slider and label
  autoFillInSliderUi(firstphase_width,'hrWidth','hWidth',1.0/64)
  //update the firstphase height slider and label
  autoFillInSliderUi(firstphase_height,'hrHeight','hHeight',1.0/64)
}
////// End Hi Res Fix//////////


////// Start Samplers//////////
function unCheckAllSamplers () {
  document.getElementsByClassName('rbSampler').forEach(e => e.removeAttribute('checked'))
}

function getSamplerElementByName(sampler_name){
  try{

    //assume the sampler_name is valid
    //return the first 
    //convert htmlCollection into an array, then user filter to get the radio button with the value equals to sampler_name
   const sampler_element = [...document.getElementsByClassName('rbSampler')].filter(e => e.value == sampler_name)[0]
  return sampler_element  
  }catch(e){
    console.warn(`Sampler '${sampler_name}' not found ${e}`)
  }

}

function getCheckedSamplerName(){
  //we assume that the samplers exist and loaded in html
  //return the name of the first checked sampler
  return  [...document.getElementsByClassName('rbSampler')].filter(e => e.checked == true)[0].value
}
function getMode(){
  return [...document.getElementsByClassName('rbMode')].filter(e => e.checked == true)[0].value
}

function checkSampler(sampler_name){
  sampler_element = getSamplerElementByName(sampler_name)
  sampler_element.checked = true
}
function autoFillInSampler(sampler_name){
  // unCheckAllSamplers()
  checkSampler(sampler_name)
}
////// End Samplers//////////

////// Start Models//////////


function getModelElementByHash(model_hash){
  try{

    //assume the model_hash is valid
    //return the first model menu item element with model_hash 
   const model_element = [...document.getElementsByClassName('mModelMenuItem')].filter(e => e.dataset.model_hash == model_hash)[0]
  return model_element  
  }catch(e){
    console.warn(`Model '${model_hash}' not found ${e}`)
  }
}
function getSelectedModelHash(){
  //return the hash of the first selected model menu item
  return  [...document.getElementsByClassName('mModelMenuItem')].filter(e => e.selected == true)[0].dataset.model_hash
}

function selectModelUi(model_hash){
  
  model_element = getModelElementByHash(model_hash)
  model_element.selected = true
}
function autoFillInModel(model_hash){
  // unCheckAllSamplers()
  model_element = getModelElementByHash(model_hash)
  selectModelUi(model_hash)
  // model_element.
  const model_title = model_element.dataset.model_title
  return model_title
}
////// End Models//////////

////// Start Init Image && Init Image Mask//////////

function getInitImageElement() {
  const ini_image_element = document.getElementById('init_image')
  return ini_image_element
  
}
function setInitImageSrc(image_src){
  
  const ini_image_element = getInitImageElement()
  ini_image_element.src = image_src
}

function getInitImageMaskElement() {
  const ini_image_mask_element = document.getElementById('init_image_mask')
  return ini_image_mask_element
  
}
function setInitImageMaskSrc(image_src){
  
  const ini_image_mask_element = getInitImageMaskElement()
  ini_image_mask_element.src = image_src
}
////// End Init Image && Init Image Mask//////////

////// Start Generate Buttons //////////

function getGenerateButtonsElements() {
  generate_buttons = [...document.getElementsByClassName('btnGenerateClass')]
  return generate_buttons
  
}
function setGenerateButtonsColor(addClassName,removeClassName){
  
  const buttons = getGenerateButtonsElements()
  buttons.forEach((button)=>{
    button.classList.add(addClassName)
    button.classList.remove(removeClassName)

    
  })
  
}


////// End Generate Buttons //////////


////// Start Servers Status //////////

function setAutomaticStatus(newStatusClass,oldStatusClass){
document.getElementById("automaticStatus").classList.add(newStatusClass)
document.getElementById("automaticStatus").classList.remove(oldStatusClass)
}
function setProxyServerStatus(newStatusClass,oldStatusClass){
  document.getElementById("proxyServerStatus").classList.add(newStatusClass)
  document.getElementById("proxyServerStatus").classList.remove(oldStatusClass)
  }
////// End Servers Status //////////


////// Start Reset Settings Button //////////

document.getElementById("btnResetSettings").addEventListener('click',autoFillDefaultSettings)

const defaultSettings = {
model: null,
prompt_shortcut: null,
positive_prompt: "",
negative_prompt: "",
selection_mode: null,
batch_number: 1,
steps: 20,
width: 512 ,
height:512,
firstphase_width:512,
firstphase_height:512,
cfg:7,
denoising_strength:0.7,
hi_res_denoising_strength:0.7,
mask_blur: 8,
inpaint_at_full_res: false,
hi_res_fix:false,
inpaint_padding:0,
seed:-1,
samplers: null,
mask_content:null
}

function autoFillInBatchNumber(batch_number){
  document.getElementById('tiNumberOfImages').value = String(batch_number)
}
function autoFillInSteps(steps){
  document.getElementById('tiNumberOfSteps').value = String(steps)
}
function autoFillDefaultSettings(){
try{

  //reset all UI settings except model selection and sampler selection 
  autoFillInPrompt(defaultSettings['positive_prompt'])
autoFillInNegativePrompt(defaultSettings['negative_prompt'])
autoFillInBatchNumber (defaultSettings['batch_number'])
autoFillInSteps (defaultSettings['steps'])
autoFillInWidth(defaultSettings['width'])
autoFillInHeight(defaultSettings['height'])
autoFillInHiResFixs(defaultSettings['firstphase_width'],defaultSettings['firstphase_height'])
document.getElementById('slCfgScale').value = defaultSettings['cfg']
autoFillInDenoisingStrength(defaultSettings['denoising_strength'])
autoFillInSliderUi(defaultSettings['hi_res_denoising_strength'],'hrDenoisingStrength','hDenoisingStrength',100)
document.getElementById('slMaskBlur').value = defaultSettings['mask_blur']
document.getElementById('chInpaintFullRes').checked = defaultSettings['inpaint_at_full_res']
setHiResFixs(defaultSettings['hi_res_fix'])
document.getElementById('tiSeed').value = String(defaultSettings['seed'])

}catch(e){
  console.warn(e)
}

}
////// End Reset Settings Button //////////

function getMaskBlur(){
  const isDisabled = document.getElementById('slMaskBlur').hasAttribute('disabled')
  let mask_blur = 0
  if(isDisabled){
    mask_blur = 0
  }else{
    mask_blur = document.getElementById('slMaskBlur').value

  }
  return mask_blur
}
function getUseSharpMask(){
  const isChecked = document.getElementById('chUseSharpMask').checked
  return isChecked
}
document.getElementById('chUseSharpMask').addEventListener('change',(ev)=>{
  const isChecked = ev.target.checked
  if(isChecked){
    document.getElementById('slMaskBlur').setAttribute('disabled')
  }else{
    document.getElementById('slMaskBlur').removeAttribute('disabled')

  }
})
module.exports = {
  getPrompt,
  autoFillInPrompt,
  getNegativePrompt,
  autoFillInNegativePrompt,
  getDenoisingStrength,
  autoFillInDenoisingStrength,
  getWidth,
  autoFillInWidth,
  getHeight,
  autoFillInHeight,
  getSliderSdValue,
  autoFillInHiResFixs,
  getHiResFixs,
  setHiResFixs,
  autoFillInSliderUi,
  getCheckedSamplerName,
  autoFillInSampler,
  autoFillInModel,
  getMode,
  setInitImageSrc,
  setInitImageMaskSrc,
  setGenerateButtonsColor,
  setAutomaticStatus,
  setProxyServerStatus,
  defaultSettings,
  autoFillDefaultSettings,
  getMaskBlur,
  getUseSharpMask
}