<script setup>
import BaseButton from "../../../../components/base/BaseButton.vue";
import BaseInputText from "../../../../components/base/BaseInputText.vue";

import Dialog from "primevue/dialog";
import InputText from "primevue/inputtext";
import Textarea from "primevue/textarea";
import ToggleSwitch from "primevue/toggleswitch";

import { reactive, watch } from "vue";

const props = defineProps({
  visible: { type: Boolean, default: false },
  embedded: { type: Boolean, default: false },
  title: { type: String, default: "Customer" },
  draft: { type: Object, default: () => ({}) },
  saving: { type: Boolean, default: false },
  errors: { type: Object, default: () => ({}) },
});

const emit = defineEmits([
  "update:visible",
  "submit",
  "cancel",
]);

const form = reactive({
  name: "",
  email: "",
  phone: "",
  website: "",
  notes: "",
  is_active: true,
});

watch(
  () => props.draft,
  (d) => {
    if (!d || typeof d !== "object") return;
    form.name = d.name ?? "";
    form.email = d.email ?? "";
    form.phone = d.phone ?? "";
    form.website = d.website ?? "";
    form.notes = d.notes ?? "";
    form.is_active = d.is_active !== false;
  },
  { deep: true, immediate: true },
);

function fieldError(field) {
  const e = props.errors?.[field];
  return Array.isArray(e) ? e[0] : e ?? "";
}

function close() {
  emit("update:visible", false);
  emit("cancel");
}

function onSubmit() {
  emit("submit", {
    name: String(form.name ?? "").trim(),
    email: form.email?.trim() || null,
    phone: form.phone?.trim() || null,
    website: form.website?.trim() || null,
    notes: form.notes?.trim() || null,
    is_active: !!form.is_active,
  });
}
</script>

<template>
  <div v-if="embedded" class="embedded-customer-form">
    <p
      v-if="errors.form"
      class="text-red-600 dark:text-red-400 text-sm mb-4"
    >
      {{ errors.form }}
    </p>

    <form class="flex flex-col gap-4 mt-0" @submit.prevent="onSubmit">
      <BaseInputText
        id="cfb-name"
        v-model.trim="form.name"
        fluid
        label="Name"
        required
        :error="fieldError('name')"
      />
      <div class="flex flex-col gap-1">
        <label
          for="cfb-email"
          class="label-small text-surface-700 dark:text-surface-200"
          >Email</label
        >
        <InputText id="cfb-email" v-model.trim="form.email" type="email" fluid />
        <p v-if="fieldError('email')" class="text-sm text-red-600 m-0">
          {{ fieldError("email") }}
        </p>
      </div>
      <BaseInputText
        id="cfb-phone"
        v-model.trim="form.phone"
        fluid
        label="Phone"
        :error="fieldError('phone')"
      />
      <div class="flex flex-col gap-1">
        <label
          for="cfb-website"
          class="label-small text-surface-700 dark:text-surface-200"
          >Website</label
        >
        <InputText id="cfb-website" v-model.trim="form.website" fluid />
        <p v-if="fieldError('website')" class="text-sm text-red-600 m-0">
          {{ fieldError("website") }}
        </p>
      </div>

      <div class="flex flex-col gap-1">
        <label
          for="cfb-notes"
          class="label-small text-surface-700 dark:text-surface-200"
          >Notes</label
        >
        <Textarea id="cfb-notes" v-model="form.notes" rows="4" fluid auto-resize />
        <p v-if="fieldError('notes')" class="text-sm text-red-600 m-0">
          {{ fieldError("notes") }}
        </p>
      </div>

      <div class="flex items-center gap-3">
        <ToggleSwitch input-id="cfb-active" v-model="form.is_active" />
        <label for="cfb-active" class="label-small cursor-pointer">Active</label>
      </div>
      <p v-if="fieldError('is_active')" class="text-sm text-red-600 m-0">
        {{ fieldError("is_active") }}
      </p>

      <div class="flex justify-end gap-3 pt-2">
        <BaseButton variant="primary" type="submit" :loading="saving">
          Save changes
        </BaseButton>
      </div>
    </form>
  </div>

  <Dialog
    v-else
    :visible="visible"
    modal
    :header="title"
    class="w-full max-w-lg"
    :dismissable-mask="true"
    @update:visible="emit('update:visible', $event)"
    @hide="emit('cancel')"
  >
    <p
      v-if="errors.form"
      class="text-red-600 dark:text-red-400 text-sm mb-4"
    >
      {{ errors.form }}
    </p>

    <form class="flex flex-col gap-4 mt-4" @submit.prevent="onSubmit">
      <BaseInputText
        id="cf-name"
        v-model.trim="form.name"
        fluid
        label="Name"
        required
        :error="fieldError('name')"
      />
      <div class="flex flex-col gap-1">
        <label for="cf-email" class="label-small text-surface-700 dark:text-surface-200"
          >Email</label
        >
        <InputText id="cf-email" v-model.trim="form.email" type="email" fluid />
        <p v-if="fieldError('email')" class="text-sm text-red-600 m-0">
          {{ fieldError("email") }}
        </p>
      </div>
      <BaseInputText
        id="cf-phone"
        v-model.trim="form.phone"
        fluid
        label="Phone"
        :error="fieldError('phone')"
      />
      <div class="flex flex-col gap-1">
        <label for="cf-website" class="label-small text-surface-700 dark:text-surface-200"
          >Website</label
        >
        <InputText id="cf-website" v-model.trim="form.website" fluid />
        <p v-if="fieldError('website')" class="text-sm text-red-600 m-0">
          {{ fieldError("website") }}
        </p>
      </div>

      <div class="flex flex-col gap-1">
        <label for="cf-notes" class="label-small text-surface-700 dark:text-surface-200"
          >Notes</label
        >
        <Textarea id="cf-notes" v-model="form.notes" rows="4" fluid auto-resize />
        <p v-if="fieldError('notes')" class="text-sm text-red-600 m-0">
          {{ fieldError("notes") }}
        </p>
      </div>

      <div class="flex items-center gap-3">
        <ToggleSwitch input-id="cf-active" v-model="form.is_active" />
        <label for="cf-active" class="label-small cursor-pointer">Active</label>
      </div>
      <p v-if="fieldError('is_active')" class="text-sm text-red-600 m-0">
        {{ fieldError("is_active") }}
      </p>

      <div class="flex justify-end gap-3 pt-2">
        <BaseButton variant="secondary" outlined type="button" @click="close">
          Cancel
        </BaseButton>
        <BaseButton variant="primary" type="submit" :loading="saving">
          Save
        </BaseButton>
      </div>
    </form>
  </Dialog>
</template>
