<script setup lang="js">
import { ref, toRaw } from 'vue'
import axios from 'axios'
import { useToast } from 'vue-toast-notification'
import Customer from './../classes/customer'

const toast = useToast({
  position: 'top-right'
})

const sameShippingAddress = ref(true)
const handleToggleSameShippingAddress = () => {
  toast.warning('This action is coming soon.')
  sameShippingAddress.value = true
}

const customer = ref(new Customer())

const submit = async (e) => {
  e.preventDefault()
  try {
    const c = toRaw(customer.value)
    await axios.post('/customer', c)
    toast.success('Successfully added a new customer.')
    // TODO: refresh items list
  } catch (err) {
    const statusCode = err.request.status
    const res = JSON.parse(err.request.response)

    switch (statusCode) {
      case (400, 409):
        toast.error(res.error)
        break
      default:
        console.error(err)
        toast.error('An unhandled exception occoured. Please check logs')
    }
  }
}
</script>

<template>
  <form class="row g-3" v-on:submit="submit">
    <div class="col-md-4">
      <label for="customer-name-input" class="form-label">Customer Name</label>
      <input
        type="text"
        class="form-control"
        id="customer-name-input"
        placeholder="Firm Name"
        v-model="customer.name"
      />
    </div>
    <div class="col-md-4">
      <label for="customer-gstin-input" class="form-label">GSTIN</label>
      <input
        type="text"
        class="form-control"
        id="customer-gstin-input"
        placeholder="22AAAAA0000A1Z5"
        v-model="customer.gstin"
      />
    </div>
    <div class="col-md-4">
      <label for="customer-contactname-input" class="form-label">Contact Name</label>
      <input
        type="text"
        class="form-control"
        id="customer-contactname-input"
        placeholder="Contact Name"
        v-model="customer.contactname"
      />
    </div>

    <div class="col-md-4">
      <label for="customer-phone-input" class="form-label">Phone Number</label>
      <input
        type="tel"
        class="form-control"
        id="customer-phone-input"
        placeholder="Contact Number"
        v-model="customer.phone"
      />
    </div>
    <div class="col-md-4">
      <label for="customer-email-input" class="form-label">E-Mail</label>
      <input
        type="email"
        class="form-control"
        id="customer-email-input"
        placeholder="E-Mail Address"
        v-model="customer.email"
      />
    </div>
    <div class="col-md-4">
      <label for="customer-website-input" class="form-label">Website</label>
      <input
        type="url"
        class="form-control"
        id="customer-website-input"
        placeholder="Website"
        v-model="customer.website"
      />
    </div>

    <div class="col-12">
      <label for="inputAddress" class="form-label">Billing Address</label>
      <textarea
        type="text"
        class="form-control"
        id="inputAddress"
        placeholder="1234 Main St"
        v-model="customer.billingaddress.addresstext"
      ></textarea>
    </div>
    <div class="col-md-5">
      <label for="inputCity" class="form-label">City</label>
      <input
        type="text"
        class="form-control"
        id="inputCity"
        v-model="customer.billingaddress.city"
      />
    </div>
    <div class="col-md-3">
      <label for="inputState" class="form-label">State</label>
      <input
        type="text"
        class="form-control"
        id="inputState"
        v-model="customer.billingaddress.state"
      />
    </div>
    <div class="col-md-1">
      <label for="inputZip" class="form-label">Zip</label>
      <input
        type="text"
        class="form-control"
        id="inputZip"
        v-model="customer.billingaddress.postalcode"
      />
    </div>
    <div class="col-md-3">
      <label for="inputCountry" class="form-label">Country</label>
      <input
        type="text"
        class="form-control"
        id="inputCountry"
        v-model="customer.billingaddress.country"
      />
    </div>

    <div class="col-12">
      <div class="form-check">
        <input
          class="form-check-input"
          type="checkbox"
          id="gridCheck"
          v-model="sameShippingAddress"
          v-on:change="handleToggleSameShippingAddress"
        />
        <label class="form-check-label" for="gridCheck">
          Shipping address same as billing address
        </label>
      </div>
    </div>

    <div class="col-12">
      <input type="submit" value="Add New Client" class="btn btn-primary" />
    </div>
  </form>
</template>
