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

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')"
      />
      <BaseInputText
        id="cfb-email"
        v-model.trim="form.email"
        type="email"
        fluid
        label="Email"
        :error="fieldError('email')"
      />
      <BaseInputText
        id="cfb-phone"
        v-model.trim="form.phone"
        fluid
        label="Phone"
        :error="fieldError('phone')"
      />
      <BaseInputText
        id="cfb-website"
        v-model.trim="form.website"
        fluid
        label="Website"
        :error="fieldError('website')"
      />
      <BaseTextarea
        id="cfb-notes"
        v-model="form.notes"
        label="Notes"
        :error="fieldError('notes')"
        :rows="4"
        auto-resize
      />

      <BaseToggleSwitch
        id="cfb-active"
        v-model="form.is_active"
        label="Active"
      />
      <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>

  <BaseModal
    v-else
    :visible="visible"
    :title="title"
    width="32rem"
    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')"
      />
      <BaseInputText
        id="cf-email"
        v-model.trim="form.email"
        type="email"
        fluid
        label="Email"
        :error="fieldError('email')"
      />
      <BaseInputText
        id="cf-phone"
        v-model.trim="form.phone"
        fluid
        label="Phone"
        :error="fieldError('phone')"
      />
      <BaseInputText
        id="cf-website"
        v-model.trim="form.website"
        fluid
        label="Website"
        :error="fieldError('website')"
      />
      <BaseTextarea
        id="cf-notes"
        v-model="form.notes"
        label="Notes"
        :error="fieldError('notes')"
        :rows="4"
        auto-resize
      />

      <BaseToggleSwitch
        id="cf-active"
        v-model="form.is_active"
        label="Active"
      />
      <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>
  </BaseModal>
</template>
