<template>
  <v-card width="100%">
    <v-toolbar>
      <v-row no-gutters class="fill-height px-6" align="center">
        <span class="font-weight-bold text-h5">
          {{ props.title }}
        </span>
      </v-row>
    </v-toolbar>
    <v-card-text style="max-height: 100vh; overflow-y: auto">
      <v-form v-model="validForm" :disabled="disable">
        <v-row no-gutters>
          <v-col cols="12" class="mt-2">
            <v-row no-gutters>
              <InputLabel class="text-capitalize" title="Email" required />
              <v-col cols="12">
                <v-text-field
                  v-model="email"
                  density="comfortable"
                  :rules="[requiredRule, emailRule]"
                ></v-text-field>
              </v-col>
            </v-row>
          </v-col>

          <v-col cols="12" class="my-2">
            <v-row no-gutters>
              <v-col cols="12" class="text-center">
                <span
                  class="text-none text-subtitle-2 font-weight-medium text-error"
                >
                  {{ message }}
                </span>
              </v-col>
            </v-row>
          </v-col>
        </v-row>
      </v-form>
    </v-card-text>

    <v-toolbar>
      <v-row class="px-6">
        <v-col cols="6">
          <v-btn
            block
            variant="text"
            class="text-none"
            size="large"
            @click="cancel"
          >
            Cancel
          </v-btn>
        </v-col>

        <v-col cols="6">
          <v-btn
            block
            variant="flat"
            color="black"
            class="text-none"
            size="large"
            :disabled="!validForm"
            @click="submit"
          >
            Submit
          </v-btn>
        </v-col>
      </v-row>
    </v-toolbar>
  </v-card>
</template>

<script setup lang="ts">
const props = defineProps({
  title: {
    type: String,
    default: "Service Provider Form",
  },
  org: {
    type: String,
    default: "",
  },
  siteId: {
    type: String,
    default: "",
  },
  siteName: {
    type: String,
    default: "",
  },
  type: {
    type: String,
    default: "app",
  },
});

const emit = defineEmits<{
  (e: "cancel"): void;
  (e: "success"): void;
  (e: "success:create-more"): void;
  (e: "notify", payload: { message: string; color: string }): void;
}>();

const validForm = ref(false);

const email = ref("");
const selectedPermissions = ref([]);
const createMore = ref(false);
const disable = ref(false);

const { requiredRule, emailRule } = useUtils();

const message = ref("");

const { createServiceProviderInvite } = useServiceProvider();

async function submit() {
  disable.value = true;

  try {
    await createServiceProviderInvite({
      email: email.value,
      siteId: props.siteId,
      serviceProviderOrgId: props.org,
    });

    emit("success");
    emit("success:create-more");
    emit("notify", {
      message: "Service provider created successfully",
      color: "success",
    });
  } catch (error: any) {
    const msg =
      error?.response?._data?.message || "Failed to create service provider";
    message.value = msg;

    emit("notify", {
      message: msg,
      color: "error",
    });
  } finally {
    disable.value = false;
  }
}

function cancel() {
  email.value = "";
  selectedPermissions.value = [];
  createMore.value = false;
  message.value = "";
  emit("cancel");
}
</script>
