<script>
import { ref } from 'vue'
import { createUser } from "@/components/session/Session.vue";
import Swal from 'sweetalert2'
//

export const showCreateUserForm = async () => {
  await Swal.fire({
    title: 'Create User',
    html: `
      <form id="createUserForm">
        <div class="field">
          <label class="label has-text-dark">Customer Number</label>
          <div class="control">
            <input class="input" type="text" id="customer_number" />
          </div>
        </div>
        <div class="field">
          <label class="label has-text-dark">Password</label>
          <div class="control">
            <input class="input" type="password" id="password" />
          </div>
        </div>
        <div class="field">
          <label class="label has-text-dark">Role</label>
          <div class="control">
            <div class="select">
              <select id="role">
                <option value="0">User</option>
                <option value="1">Admin</option>
                <option value="2">Employee</option>
              </select>
          </div>
        </div>
      </form>
    `,
    showCancelButton: true,
    confirmButtonText: 'Create User',
    preConfirm: () => {
      createUser(document.getElementById('customer_number').value, document.getElementById('password').value, document.getElementById('role').value)
          .then(() => {
            Swal.fire('User created successfully');
          })
          .catch((e) => {
            Swal.fire('Error', e.response.data.error ?? e.response, 'error');
          });
    }
  });
}

</script>