<script>
import { ref } from 'vue'
import { createScan } from "@/components/numberplatescanners/Scans.vue";
import Swal from "sweetalert2";

//

export const showCreateNumberPlateScanForm = async () => {
  await Swal.fire({
    title: 'Create Number Plate Scan (Simulate a number plate scan)',
    html: `
      <form id="createNumberPlateScanForm">
        <div class="field">
          <label class="label">API Key (The API key is used to authenticate the scanner)</label>
          <div class="control">
            <input class="input" type="text" id="api_key" />
          </div>
        </div>
        <div class="field">
          <label class="label">Number Plate</label>
          <div class="control">
            <input class="input" type="text" id="number_plate" />
          </div>
        </div>
      </form>
    `,
    showCancelButton: true,
    confirmButtonText: 'Simulate Scan',
    preConfirm: () => {
      const api_key = document.getElementById('api_key').value;
      const number_plate = document.getElementById('number_plate').value;
      // Check if the user has entered an API key
      if (!api_key) {
        // Return an error message under the API key field
        document.getElementById('api_key').insertAdjacentHTML('afterend', '<p class="help is-danger">Please enter an API key</p>');
        return false;
      }
      // Check if the user has entered a number plate
      if (!number_plate) {
        // Return an error message under the number plate field
        document.getElementById('number_plate').insertAdjacentHTML('afterend', '<p class="help is-danger">Please enter a number plate</p>');
        return false;
      }
      createScan(api_key, number_plate).then((response) => {
        Swal.fire({
          title: 'Number Plate Scan simulated successfully',
          icon: 'success'
        });
      }).catch((error) => {
        Swal.fire({
          title: 'Error',
          icon: 'error'
        });
      });
    }
  });
};

</script>