<script lang="ts" setup>
import { ref, computed } from 'vue'
import { useForm } from '@inertiajs/vue3'
import type { User, UserProfile } from '@/types'

interface Props {
  user: User
  profile: UserProfile | null
  firstName: string
  lastName: string
}

const props = defineProps<Props>()

const form = useForm({
  first_name: props.firstName,
  last_name: props.lastName,
  phone: props.user.phone ?? '',
  company: props.user.company ?? '',
  address_line1: props.profile?.billing_address_line1 ?? '',
  address_line2: props.profile?.billing_address_line2 ?? '',
  city: props.profile?.billing_city ?? '',
  state: props.profile?.billing_state ?? '',
  zip: props.profile?.billing_zip ?? '',
  country: props.profile?.billing_country ?? '',
})

const avatarInitials = computed<string>(() => {
  const first = props.firstName.charAt(0).toUpperCase()
  const last = props.lastName.charAt(0).toUpperCase()
  return `${first}${last}` || '?'
})

const countries: string[] = [
  'United States',
  'Canada',
  'United Kingdom',
  'Australia',
  'Germany',
  'France',
  'Netherlands',
  'Japan',
  'Singapore',
  'India',
  'Brazil',
]

const submit = (): void => {
  form.put('/profile')
}

const resetForm = (): void => {
  form.reset()
  form.clearErrors()
}
</script>

<template>
  <VRow>
    <VCol cols="12">
      <VCard>
        <VCardText class="d-flex">
          <VAvatar
            rounded
            size="100"
            color="primary"
            variant="tonal"
            class="me-6"
          >
            <span class="text-h4">{{ avatarInitials }}</span>
          </VAvatar>

          <div class="d-flex flex-column justify-center gap-2">
            <div class="d-flex flex-wrap gap-4">
              <VBtn
                color="primary"
                size="small"
                disabled
              >
                <VIcon
                  icon="tabler-cloud-upload"
                  class="d-sm-none"
                />
                <span class="d-none d-sm-block">Upload new photo</span>
              </VBtn>

              <VBtn
                size="small"
                color="secondary"
                variant="tonal"
                disabled
              >
                <span class="d-none d-sm-block">Reset</span>
                <VIcon
                  icon="tabler-refresh"
                  class="d-sm-none"
                />
              </VBtn>
            </div>

            <p class="text-body-2 text-medium-emphasis mb-0">
              Allowed JPG, GIF or PNG. Max size of 800K
            </p>
          </div>
        </VCardText>

        <VCardText class="pt-2">
          <VForm
            class="mt-3"
            @submit.prevent="submit"
          >
            <VRow>
              <VCol
                md="6"
                cols="12"
              >
                <VTextField
                  v-model="form.first_name"
                  label="First Name"
                  placeholder="John"
                  :error-messages="form.errors.first_name ? [form.errors.first_name] : []"
                />
              </VCol>

              <VCol
                md="6"
                cols="12"
              >
                <VTextField
                  v-model="form.last_name"
                  label="Last Name"
                  placeholder="Doe"
                  :error-messages="form.errors.last_name ? [form.errors.last_name] : []"
                />
              </VCol>

              <VCol
                cols="12"
                md="6"
              >
                <VTextField
                  :model-value="user.email"
                  label="Email"
                  type="email"
                  disabled
                  placeholder="john@example.com"
                />
              </VCol>

              <VCol
                cols="12"
                md="6"
              >
                <VTextField
                  v-model="form.company"
                  label="Organization"
                  placeholder="EZSCALE"
                  :error-messages="form.errors.company ? [form.errors.company] : []"
                />
              </VCol>

              <VCol
                cols="12"
                md="6"
              >
                <VTextField
                  v-model="form.phone"
                  label="Phone Number"
                  placeholder="+1 (917) 543-9876"
                  :error-messages="form.errors.phone ? [form.errors.phone] : []"
                />
              </VCol>

              <VCol
                cols="12"
                md="6"
              >
                <VTextField
                  v-model="form.address_line1"
                  label="Address"
                  placeholder="123 Main St"
                  :error-messages="form.errors.address_line1 ? [form.errors.address_line1] : []"
                />
              </VCol>

              <VCol
                cols="12"
                md="6"
              >
                <VTextField
                  v-model="form.address_line2"
                  label="Address Line 2"
                  placeholder="Apt 4B"
                  :error-messages="form.errors.address_line2 ? [form.errors.address_line2] : []"
                />
              </VCol>

              <VCol
                cols="12"
                md="6"
              >
                <VTextField
                  v-model="form.city"
                  label="City"
                  placeholder="New York"
                  :error-messages="form.errors.city ? [form.errors.city] : []"
                />
              </VCol>

              <VCol
                cols="12"
                md="6"
              >
                <VTextField
                  v-model="form.state"
                  label="State"
                  placeholder="New York"
                  :error-messages="form.errors.state ? [form.errors.state] : []"
                />
              </VCol>

              <VCol
                cols="12"
                md="6"
              >
                <VTextField
                  v-model="form.zip"
                  label="Zip Code"
                  placeholder="10001"
                  :error-messages="form.errors.zip ? [form.errors.zip] : []"
                />
              </VCol>

              <VCol
                cols="12"
                md="6"
              >
                <VSelect
                  v-model="form.country"
                  label="Country"
                  :items="countries"
                  placeholder="Select Country"
                  :error-messages="form.errors.country ? [form.errors.country] : []"
                />
              </VCol>

              <VCol
                cols="12"
                class="d-flex flex-wrap gap-4"
              >
                <VBtn
                  type="submit"
                  :loading="form.processing"
                  :disabled="form.processing"
                >
                  Save changes
                </VBtn>

                <VBtn
                  color="secondary"
                  variant="tonal"
                  @click.prevent="resetForm"
                >
                  Cancel
                </VBtn>
              </VCol>
            </VRow>
          </VForm>
        </VCardText>
      </VCard>
    </VCol>
  </VRow>
</template>
