<%= pb_rails("body", props: {
  margin_bottom: "md",
  id: "body_common"
}) %>

<%= pb_rails("passphrase", props: { label: "Passphrase", classname: "passphrase_common" }) %>

<%= pb_rails("progress_simple", props: { percent: 0, id: "bar_common" }) %>

<%= pb_rails("caption", props: { size: 'xs', text: "hello", id: "caption_common" }) %>


<%= javascript_tag do %>
    window.addEventListener("DOMContentLoaded", () => {

    const commonText = document.querySelector("#body_common")

    // variables for the kits you are targeting 
    const passphrase = document.querySelector(".passphrase_common").querySelector("input")
    const barVariant = document.getElementById("bar_common")
    const barPercent = document.getElementById("bar_common").querySelector("div")
    const caption = document.getElementById("caption_common")

    // hide the bar and captions
    barVariant.style.display = 'none';
    barPercent.style.display = 'none';
    caption.style.display = 'none';


    const handleStrengthCalculation = (settings) => {
      const {
          passphrase = "",
          common = false,
          isPwned = false,
          averageThreshold = 2,
          minLength = 12,
          strongThreshold = 3,
        } = settings

      const resultByScore = {
        0: {
          variant: 'negative',
          label: '',
          percent: 0,
        },
        1: {
          variant: 'negative',
          label: 'This passphrase is too common',
          percent: 25,
        },
        2: {
          variant: 'negative',
          label: 'Too weak',
          percent: 25,
        },
        3: {
          variant: 'warning',
          label: 'Almost there, keep going!',
          percent: 50,
        },
        4: {
          variant: 'positive',
          label: 'Success! Strong passphrase',
          percent: 100,
        }
      }

      const { score } = zxcvbn(passphrase);

      const noPassphrase = passphrase.length <= 0
      const commonPassphrase = common || isPwned
      const weakPassphrase = passphrase.length < minLength || score < averageThreshold
      const averagePassphrase = score < strongThreshold
      const strongPassphrase = score >= strongThreshold

      if (noPassphrase) {
        return {...resultByScore[0], score}
      } else if (commonPassphrase) {
        return {...resultByScore[1], score}
      } else if (weakPassphrase) {
        return {...resultByScore[2], score}
      } else if (averagePassphrase){
        return {...resultByScore[3], score}
      } else if (strongPassphrase) {
        return {...resultByScore[4], score}
      }
    }

    // array that holds the common passwords you wish to target
    const COMMON_PASSPHRASES = ['passphrase', 'apple', 'password', 'p@55w0rd']

    commonText.textContent = `Try typing any of the following: ${COMMON_PASSPHRASES.join(', ')}`

    // function that checks if the user password is in the common password list
    const isCommon = (passphrase) => {
      if (COMMON_PASSPHRASES.includes(passphrase))
        return true
      return false
    }

    // event listeners attached to the input field
    passphrase.addEventListener('input', (e) => {
      const passphrase = e.target.value;

      // pass in passphrase to the handleStrengthCalculation and set that equal to result variable
      const result = handleStrengthCalculation({ passphrase: passphrase, common: isCommon(passphrase) })

      // conditional statment to show or hide progress_simple bar and caption if user has entered a password
      if (passphrase) {
        barVariant.style.display = 'block';

        barPercent.style.display = 'block';

        caption.style.display = 'block';
      } else {
        barVariant.style.display = 'none';

        barPercent.style.display = 'none';

        caption.style.display = 'none';
      }

      // set the width of the progress_simple kit
      barPercent.style.width = result.percent.toString()+ "%"


      // set the variant of the progress_simple kit
      barVariant.setAttribute("class", "pb_progress_simple_kit_"+ result.variant +"_left");


      // set the text of the caption kit
      caption.textContent = result.label
    });

  })
<% end %>