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

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

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

<%= pb_rails("text_input", props: { label: "Passphrase Strength", value: "0", disabled: true, id: "calc_strength_change" }) %>


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

    // variables for the kits you are targeting 
    const passphrase = document.querySelector(".passphrase_change").querySelector("input")
    const calcStrength = document.querySelector("#calc_strength_change")
    const barVariant = document.getElementById("bar_change")
    const barPercent = document.getElementById("bar_change").querySelector("div")
    const caption = document.getElementById("caption_change")

    // 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}
      }
    }

    // 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})

      // set the value of the text_input to the score
      calcStrength.value = result.score

      // 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 %>