behavior RetryPrintHandler
  on Retry[event.detail.source==me.id] from body
    if me matches <button/>
      trigger click
      exit
    end

    get @hx-trigger of me

    if it contains 'PrintPdf'
      trigger PrintPdf
      exit
    end

    if it contains 'PrintSticker'
      trigger PrintSticker
      exit
    end
  end
end

behavior PrintStickerInProgressModalHandler(source)
  on StickerPrinted from body
    set $stickerPrinted to true
    send Continue to me
  end

  on PrintFailed from body
    set $stickerPrintError to event.detail.Message
    send Continue to me
  end

  on shown.bs.modal from body
    if event.target is not #PrintStickerInProgressModal
      exit
    end

    if $stickerPrinted
      call hidePrintStickerInProgressModal()
      exit
    end

    if $stickerPrintError
      call showPrintStickerRetryModal($stickerPrintError)
      exit
    end

    wait for Continue or 5s

    if result is 5s
      call showPrintStickerRetryModal('Timed out.')
      exit
    end

    if $stickerPrinted
      call hidePrintStickerInProgressModal()
      exit
    end

    call showPrintStickerRetryModal($stickerPrintError)
  end

  on ShowPrintStickerInProgress from body
    set $stickerPrintError to undefined
    set $stickerPrinted to undefined

    htmx.ajax('GET', '/shared/components/printing/sticker/in-progress-modal', { target: '#page-modal', values: { source: source } })
  end

  on ShowSticker from body
    htmx.ajax('POST', '/shared/components/printing/sticker/sticker-modal', { target: '#page-modal', values: { data: event.detail.Data } })
  end

  def hidePrintStickerInProgressModal()
    bootstrap.Modal.getInstance(#PrintStickerInProgressModal).hide()
  end

  def showPrintStickerRetryModal(message)
    set #printStickerError's innerText to message
    call hidePrintStickerInProgressModal()
    bootstrap.Modal.getOrCreateInstance(#PrintStickerRetryModal).show()
  end
end

behavior PrintPdfInProgressModalHandler(source)
  on PdfPrinted from body
    set $pdfPrinted to true
    send Continue to me
  end

  on PrintFailed from body
    set $pdfPrintError to event.detail.Message
    send Continue to me
  end

  on shown.bs.modal from body
    if event.target is not #PrintPdfInProgressModal
      exit
    end

    if $pdfPrinted
      call hidePrintPdfInProgressModal()
      exit
    end

    if $pdfPrintError
      call showPrintPdfRetryModal($pdfPrintError)
      exit
    end

    wait for Continue or 5s

    if result is 5s
      call showPrintPdfRetryModal('Timed out.')
      exit
    end

    if $pdfPrinted
      call hidePrintPdfInProgressModal()
      exit
    end

    call showPrintPdfRetryModal($pdfPrintError)
  end

  on ShowPrintPdfInProgress from body
    set $pdfPrintError to undefined
    set $pdfPrinted to undefined
    htmx.ajax('GET', '/shared/components/printing/pdf/in-progress-modal', { target: '#page-modal', values: { source: source } })
  end

  on ShowPdf from body
    htmx.ajax('POST', '/shared/components/printing/pdf/pdf-modal', { target: '#page-modal', values: { documentUrl: event.detail.DocumentUrl, requestId: event.detail.RequestId } })
  end

  def hidePrintPdfInProgressModal()
    js
      const modals = document.querySelectorAll('.PrintPdfInProgressModal');
      modals.forEach(modal => {
        const instance = bootstrap.Modal.getInstance(modal);
        if (instance) {
          instance.hide();
          modal.addEventListener('hidden.bs.modal', () => {
            instance.dispose();
          });
        }
      });
    end
  end

  def showPrintPdfRetryModal(message)
    set #printPdfError's innerText to message
    call hidePrintPdfInProgressModal()
    bootstrap.Modal.getOrCreateInstance(#PrintPdfRetryModal).show()
  end
end

behavior ModalEscapeKeyHandler(closeButton)
  on keydown[key is 'Escape']
    if me matches .show
      send click to closeButton
    end
  end
end


behavior PhoneNumberInput(hiddenInput, initialValue)
  on load
    set me.value to initialValue
    set :phoneNumber to intlTelInput(me, {utilsScript: 'https://cdn.jsdelivr.net/npm/intl-tel-input@17.0.16/build/js/utils.js', allowDropdown : false, customPlaceholder: getCustomPhoneNumberPlaceholder})
  end

  on blur
    if me.value === '' or :phoneNumber.isValidNumber() then
      call :phoneNumber.setNumber(:phoneNumber.getNumber())
      set #{hiddenInput}.value to :phoneNumber.getNumber()
      send change to #{hiddenInput}
      me.setCustomValidity('')
    else
      me.setCustomValidity('Invalid phone number')
      me.reportValidity()
    end
  end

  on keydown[key is 'Enter']
    send blur to me
  end

  on keyup
    if me.value ==='' then
     call :phoneNumber.setCountry("us")
    end
  end

  js
    function getCustomPhoneNumberPlaceholder(selectedCountryPlaceholder, selectedCountryData) {
        return "(___) ___-____";
      }
  end

end

def uppercaseOnGivenInput(inputId)
  call uppercaseStringValue(inputId.value) then set inputId.value to it
end

def uppercaseStringValue(value)
  js(value)
    return value.toLocaleUpperCase()
  end
  return it
end

def removeSpecialCharactersOnGivenInput(inputId)
  call removeSpecialCharacteresOnStringValue(inputId.value) then set inputId.value to it
end

def removeSpecialCharacteresOnStringValue(value)
  js(value)
    return value.replace(/[\W\s\._\-]+/g, '')
  end
  return it
end

behavior TitleCaseOnBlur
  on blur from me
    js(me)
      if (me.value.toUpperCase() === me.value) return me.value;

      return me.value.replace(/\b\w/g, s => s.toUpperCase());
    end

    set me.value to it
  end
end

behavior TrimOnBlur
  on blur from me
    set me.value to me.value.trim()
  end
end

behavior NumericInput(maxLength, customValidationMessage)
  on keyup from me
    set me.value to removeNonNumeric(me.value)

    if maxLength is not empty then
      get my value

      if it's length is greater than maxLength then
        set my value to it.substring(0, maxLength)
      end
    end
  end

  on blur
    if customValidationMessage is not empty then
      me.setCustomValidity('')
      if me.checkValidity() is false then
        if me.value is not empty then
          me.setCustomValidity(customValidationMessage)
          me.select()
        end
        me.reportValidity()
      end
    end
  end

  on focus
    me.select()
  end
end

behavior TextInput
  on load
    if I match .autoselect then
      call moveCursorToEnd(me)
    end
  end

  on focus
    call moveCursorToEnd(me)
    end

  def moveCursorToEnd(focusElement)
    set length to focusElement.value.length
    focusElement.setSelectionRange(0, length)
  end
end

behavior PinInput(invalidMessage)
  on input
    if event.target.validity.tooShort or event.target.validity.tooLong
      me.setCustomValidity(invalidMessage)
    else
      me.setCustomValidity('')
    end
  end
end

behavior ConfirmPinInput(pinInput, invalidMessage, notMatchingMessage)
  on input or change from pinInput
    get pinInput's value
    if it is not me.value then
      me.setCustomValidity(notMatchingMessage)
    else if event.target.validity.tooShort or event.target.validity.tooLong
      me.setCustomValidity(invalidMessage)
    else
      me.setCustomValidity('')
    end
  end
end

behavior RadioButton
  on keydown[key is 'Tab' and not shiftKey] from me
    halt the event
    set nextButton to (the next <input.radio-button /> from me)

    if nextButton is empty
      set nextButton to (the next <button.btn-primary /> from me)
    end

    nextButton.focus()
  end

  on keydown[key is 'Tab' and shiftKey] from me
    halt the event
    set previousButton to (the previous <input.radio-button /> from me)

    if previousButton is empty
      set previousButton to (the previous <input.form-control /> from me)
    end

    previousButton.focus()
  end

  on keydown[key is 'Tab' and shiftKey] from <button.btn-primary />
    set lastButton to (the last <input.radio-button />)

    if lastButton is not empty
      call lastButton.focus() halt
    end
  end
end

behavior DecimalInput(decimalPlaces, decimalMark, invalidMessage)
  on keypress
    me.setCustomValidity('')

    if event.code is 'Enter' or
       event.code is 'Digit0' or
       event.code is 'Digit1' or
       event.code is 'Digit2' or
       event.code is 'Digit3' or
       event.code is 'Digit4' or
       event.code is 'Digit5' or
       event.code is 'Digit6' or
       event.code is 'Digit7' or
       event.code is 'Digit8' or
       event.code is 'Digit9' or then
      exit
    end

    if String.fromCharCode(event.charCode) is decimalMark then
      get my value
      set indexOfExistingMarker to it.indexOf(decimalMark)

      if indexOfExistingMarker is greater than -1 and (indexOfExistingMarker <= me.selectionStart or indexOfExistingMarker > me.selectionEnd) then
        halt
      end

      exit
    end

    halt
  end

  on blur
    get my value
    if it is not empty then
      set locale to navigator.language
      if locale is empty then
        set locale to 'en-US'
      end
      set decimalLiteral to it.replace(',', '.')

      if isNaN(decimalLiteral) then
        me.setCustomValidity(invalidMessage)
        me.reportValidity()
      else
        set my value to parseFloat(decimalLiteral).toLocaleString(locale, {
          minimumFractionDigits: decimalPlaces,
          maximumFractionDigits: decimalPlaces
        })
      end
    end
  end
end

behavior CustomValidityMessageInput(invalidType, invalidMessage)
  on input
    if event.target.validity[invalidType]
      me.setCustomValidity(invalidMessage)
    else
      me.setCustomValidity('')
    end
  end

  on blur
    call me.reportValidity()
  end
end


behavior Modal
  init
    if $modals is null
      set $modals to []
    end
  end

  on hidePrevented.bs.modal from body
    if event.target is not me
      exit
    end

    wait a tick then setFocus()
  end

  on shown.bs.modal from body
    if event.target is not me
      exit
    end

    setFocus()
  end

  on lubesoft.modal.focus from body
    if event.target is not me
      exit
    end

    setFocus()
  end

  on lubesoft.modal.hide from body
    set modalEvent to findEvent(event, me.id)

    if not modalEvent
      exit
    end

    call hideModal()
  end

  on lubesoft.modal.show from body

    set modalEvent to findEvent(event, me.id)
    if not modalEvent
      exit
    end

    set modalInstance to createModal(me)

    wait a tick

    call modalInstance.show()

    append me.id to $modals
  end

  on every htmx:beforeSend from body
    if event.detail.elt does not match closest parent <form />
      exit
    end

    set submitButton to first <button[type="submit"]:not(.no-disable) /> in me

    if submitButton is not null
      toggle @disabled on submitButton until htmx:afterRequest from body
    end
  end

  on keydown[key is "Escape"]
    halt the event

    set modalId to $modals.pop()

    if modalId is null
      exit
    end

    set keyboard to @data-bs-keyboard of #{modalId}

    if keyboard is not null and keyboard is 'false'
      exit
    end

    set modal to getModal(#{modalId})

    call modal.hide()

    set nextModalId to $modals[$modals.length - 1]

    if nextModalId is null
      exit
    end

    set nextModalElement to #{nextModalId}

    if nextModalElement is null
      exit
    end

    send lubesoft.modal.focus to nextModalElement
  end

  on keydown[key is "Enter"] from <button.cancel-btn/> in me
    halt the event

    call hideModal()
  end

  def setFocus()
    wait 100ms
    set focusElement to first <.autofocus /> in me

    if focusElement is not null
      focusElement.focus()
      if focusElement.select
        focusElement.select()
      else
        if focusElement.setSelectionRange
          moveCursorToEnd(focusElement)
        end
      end
    end
  end

  def moveCursorToEnd(focusElement)
    set length to focusElement.value.length
    focusElement.setSelectionRange(0, length)
  end

  def hideModal()
    set modalInstance to getModal(me)

    if modalInstance is null
      exit
    end

    call modalInstance.hide()

    call $modals.pop()
  end

  def ShowModal(id, data)
    send lubesoft.modal.show(value: [{ id: id, data: data }]) to body
  end


  js
    function createModal(el) {
      return new bootstrap.Modal(el, { keyboard: false });
    }

    function getModal(el) {
      return bootstrap.Modal.getInstance(el);
    }

    function getOrCreateModal(el) {
      return bootstrap.Modal.getOrCreateInstance(el);
    }

    function findEvent(event, id) {
      if (!event.detail?.value) {
        return undefined;
      }

      if (!Array.isArray(event.detail.value)) {
        return undefined;
      }

      return event.detail.value.find(x => x.id === id);
    }
  end
end


behavior ScriptsReady()
  on load 1 from me
    send lubesoft.behaviors.ready to me
  end
end

behavior SearchMinimumQueryLengthBehavior(minimumQueryLength, errorMessage)
  on keyup[key=='Enter']
    if me.value.length < minimumQueryLength
       call me.setCustomValidity(errorMessage)
       call me.reportValidity()
     else
       call me.setCustomValidity('')
     end
  end
end


behavior HandleLocalMenuKeys()
on keydown from body
    if #local-menu's @class contains "show"
      set activeValueItem to #activeItem.value
          set firstMatchingOccurance to -1
          repeat in .workorder-dropdown-item index i
            set firstLetter to it.innerHTML.trim()[0].toLowerCase()
            if firstLetter == event.key.toLowerCase()
              if firstMatchingOccurance == -1
                set firstMatchingOccurance to i
              end
              if i > activeValueItem
                set #activeItem.value to i
                call it.focus()
                exit
              end
            end
          end
          if firstMatchingOccurance > -1
            repeat in .workorder-dropdown-item index i
              if i == firstMatchingOccurance
                call it.focus()
                set #activeItem.value to firstMatchingOccurance
                exit
              end
            end
          end
        end
    end
end


behavior DisableButtonDuringRequest
  on click
    toggle @disabled until htmx:afterOnLoad
  end
end

behavior SignOutButton
  on click send SignOutRequested to body
end

behavior ReturnToFocusButton
  on click
    call localStorage.setItem('focusTarget', me.id)
  end
end

behavior ReturnToFocusHandler(focusOnFirstTabElement)
  on hidden.bs.modal from body
    call returnToFocus()
  end

  on load
    if focusOnFirstTabElement then
      get the first <.first-tab-element/>
      if it exists then
        call focusAndSelect(it)
      end

      call removeFocusTarget()
      exit
    end

    call returnToFocus()
  end

  def removeFocusTarget()
    localStorage.removeItem('focusTarget')
  end

  def returnToFocus
    set focusTarget to localStorage.getItem('focusTarget')
    if focusTarget then
      call focusAndSelect(#{focusTarget})
      call removeFocusTarget()
    end
  end

  def focusAndSelect(el)
    call el.focus()

    if el.select then
      call el.select()
      exit
    end

    if el.setSelectionRange then
      call el.setSelectionRange(0, el.value.length)
    end
  end
end