---
import { Input, Button } from '../';
const { class: additionalClasses } = Astro.props;
---

<div class="login-wrapper">
  <div id="login-content">
    <form class="login-form" id="sign-in">
      <div class="form-fields">
        <Input name="email" type="email" placeholder="Email/username..." />
        <Input name="password" type="password" placeholder="Password..." />
      </div>
      <Button type="submit" id="submit-button">
        <span id="button-text">Log in to Your Account</span>
        <span id="loading-icon" class="hidden">
          <svg class="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
          </svg>
        </span>
      </Button>
    </form>
  </div>
</div>

<script>
  import { actions, isInputError } from "astro:actions";

  const loginWrapper = document.querySelector(".login-wrapper") as HTMLDivElement;
  const loginContent = document.querySelector("#login-content") as HTMLDivElement;
  const accountButtonText = document.querySelector('#account-button-text') as HTMLSpanElement;
  const accountButton = document.querySelector('.account-button') as HTMLButtonElement;

  let currentUser = null;

  // Function to set the loading state of the submit button
  function setLoading(isLoading: boolean) {
    const submitButton = document.querySelector("#submit-button") as HTMLButtonElement;
    const buttonText = document.querySelector("#button-text") as HTMLSpanElement;
    const loadingIcon = document.querySelector("#loading-icon") as HTMLSpanElement;
    
    submitButton.disabled = isLoading;
    buttonText.classList.toggle('hidden', isLoading);
    loadingIcon.classList.toggle('hidden', !isLoading);
  }

  // Function to show the login form
  function showLoginForm() {
    loginWrapper.style.display = 'block';
    setTimeout(() => {
      loginWrapper.style.opacity = '1';
      loginWrapper.style.transform = 'translateY(0)';
    }, 10);
  }

  // Function to hide the login form
  function hideLoginForm() {
    loginWrapper.style.opacity = '0';
    loginWrapper.style.transform = 'translateY(-10px)';
    setTimeout(() => {
      loginWrapper.style.display = 'none';
    }, 300);
  }

  // Function to update UI based on login state
  function updateUIForUser(email: string) {
    currentUser = email;
    const username = email.split('@')[0]; // Extract username
    loginContent.innerHTML = `
     <h4>Welcome back</h4>
     <p class="text-sm font-semibold"> ${email} !</p>
     <br />
     <Button id="logout-button" class="mt-4">Log Out</button>
      <br/> 
     `;
  addLogoutListener();
  hideLoginForm();
  // Dispatch event after updating the UI
  window.dispatchEvent(new CustomEvent('userLoggedIn', { detail: { email } }));
}

  // Function to update UI for logged out state
  function updateUIForLoggedOut() {
    currentUser = null;
    accountButtonText.textContent = 'Account';
    loginContent.innerHTML = `
      <form class="login-form" id="sign-in">
        <div class="form-fields">
          <Input name="email" type="email" placeholder="Email/username..." />
          <Input name="password" type="password" placeholder="Password..." />
        </div>
        <button type="submit" id="submit-button">
          <span id="button-text">Log in to Your Account</span>
          <span id="loading-icon" class="hidden">
            <svg class="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
            </svg>
          </span>
        </button>
      </form>
    `;
    addLoginListener();
    window.dispatchEvent(new CustomEvent('userLoggedOut'));

  }

  // Function to add logout listener
  function addLogoutListener() {
    const logoutButton = document.querySelector('#logout-button');
    logoutButton?.addEventListener('click', handleLogout);
  }

  // Function to add login listener
  function addLoginListener() {
    const loginForm = document.querySelector("#sign-in") as HTMLFormElement;
    loginForm?.addEventListener('submit', handleLogin);
  }

  // Handle login
  async function handleLogin(e: Event) {
    e.preventDefault();
    setLoading(true);

    try {
    const { error, data } = await actions.signinAccount(new FormData(e.target as HTMLFormElement));
    if (error) {
      console.log(error);
      if (isInputError(error)) {
        console.log(error.fields);
      }
      return;
    }
    updateUIForUser(data.email as string);
    // Dispatch the event after updating the UI
    window.dispatchEvent(new CustomEvent('userLoggedIn', { detail: { email: data.email } }));
  } catch (error) {
    console.error('An unexpected error occurred:', error);
    // You might want to show an error message to the user here
  } finally {
    setLoading(false);
  }
}

  // Handle logout
  async function handleLogout() {
    try {
    const { error } = await actions.signoutAccount();
    if (error) {
      console.error(error);
      // Handle error appropriately
      return;
    }
    updateUIForLoggedOut();
    window.dispatchEvent(new CustomEvent('userLoggedOut'));
  } catch (error) {
    console.error('An error occurred during logout:', error);
  }
}

  // Toggle login form when Account button is clicked
  accountButton?.addEventListener('click', (e) => {
    e.stopPropagation();
    if (loginWrapper.style.display === 'none' || loginWrapper.style.display === '') {
      showLoginForm();
    } else {
      hideLoginForm();
    }
  });

  // Hide login form when clicking outside
  document.addEventListener('click', (e) => {
    if (!loginWrapper.contains(e.target as Node) && !accountButton?.contains(e.target as Node)) {
      hideLoginForm();
    }
  });

  // Prevent form from closing when clicking inside it
  loginWrapper.addEventListener('click', (e) => {
    e.stopPropagation();
  });

  // Initial setup
  function initializeLoginState() {
  const accountButtonText = document.getElementById('account-button-text');

    // Check if accountButtonText exists
    if (accountButtonText) {
      const textContent = accountButtonText.textContent;

      // Check if textContent is not null
      if (textContent && textContent.startsWith('Welcome')) {
        const email = textContent.replace('Welcome, ', '');
        updateUIForUser(email);
      } else {
        updateUIForLoggedOut();
      }
    } else {
      updateUIForLoggedOut();
    }
  }

  // Call the initialization function when the script loads
  initializeLoginState();
</script>

<style>
  .login-wrapper {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 20px;
    z-index: 1000;
    display: none;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    width: 300px; /* Set a fixed width to maintain size */
    font-size: 1rem; /* Set a fixed font size */
  }

  .login-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  .form-fields {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  /* Style for the logout button */
  #logout-button {
    background-color: #f44336;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  #logout-button:hover {
    background-color: #d32f2f;
  }
</style>

ReferenceError
An error occurred.
document is not defined
Browser APIs are not available on the server.

If the code is in a framework component, try to access these objects after rendering using lifecycle methods or use a client:only directive to make the component exclusively run on the client.

See https://docs.astro.build/en/guides/troubleshooting/#document-or-window-is-not-defined for more information.
dist/quill.js:7661:12