export default function Password(password) {

  const closedEyeIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <g id="fd6d6302-eec0-441e-9818-ee6049335871">
    <path
  d="M7.5,5.1,9.4,3.3H8C3.6,3.3.6,7.3.5,7.5L0,8.1l.5.5a15.3,15.3,0,0,0,1.8,1.8L3.6,9,2.5,8A9.2,9.2,0,0,1,7.5,5.1Zm2.7-1.6L8.6,5.1h0l1.6-1.6ZM2.8,10.8h.1L4.2,9.5h0Z"/>
    <path d="M7.6,6.1,6.1,7.6h.1L7.6,6.1Z"/>
    <path
  d="M15.6,7.4a14.2,14.2,0,0,0-3.5-3.1l2.7-2.6L13.4.3,10.2,3.5,8.6,5.1l-1,1L2.9,10.8,0,13.7l1.4,1.4,3.2-3.2a7.3,7.3,0,0,0,3.5.9h.4c4.3-.2,7-4.1,7.1-4.2L16,8ZM8.4,10.9A6.7,6.7,0,0,1,6,10.5l.9-.9A2,2,0,0,0,8,9.9,1.9,1.9,0,0,0,10,8a2.1,2.1,0,0,0-.4-1.1l1.1-1.2A11.7,11.7,0,0,1,13.6,8,7.5,7.5,0,0,1,8.4,10.9Z"/>
    </g>
    </svg>`;

  const openEyeIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
  <g id="fd1be6d1-2037-4b52-9a71-e77585cf7773">
    <path
      d="M8.1,12.8c-2.6,0-5.2-1.4-7.6-4.1L0,8.1l.5-.6C.6,7.3,3.6,3.3,8,3.2c2.7-.1,5.2,1.3,7.6,4.2L16,8l-.4.6c-.1.1-2.8,4-7.1,4.2ZM2.5,8c2,2,3.9,3,5.9,2.9A7.5,7.5,0,0,0,13.6,8C11.8,6,9.9,5,8,5.1S3.4,7,2.5,8Z"/>
    <circle cx="8" cy="8" r="1.9"/>
  </g>
</svg>`

  var payLoadContainer = password.querySelector('.password-payload');
  if (payLoadContainer) {
    var payloadContent = payLoadContainer.textContent.trim();
    payLoadContainer.textContent = '••••';
  }

  var passwordToggle = password.querySelector('.password-toggle');
  if (passwordToggle) {
    passwordToggle.addEventListener('click', function () {
      onToggleEvent(passwordToggle)
    });
    passwordToggle.addEventListener('keypress', function (e) {
      if (e.key == 'Enter') {
        onToggleEvent(passwordToggle)
      }
    });
  }

  function onToggleEvent(passwordToggle) {
    if (passwordToggle.classList.contains('pwhidden')) {
      payLoadContainer.textContent = payloadContent;
      passwordToggle.innerHTML = closedEyeIcon;
      passwordToggle.classList.remove('pwhidden');
      passwordToggle.classList.add('pwshown');
    } else if (passwordToggle.classList.contains('pwshown')) {
      payLoadContainer.textContent = '••••';
      passwordToggle.innerHTML = openEyeIcon;
      passwordToggle.classList.remove('pwshown');
      passwordToggle.classList.add('pwhidden');
    }
  }

}