<template>
  <v-row no-gutters>
    <v-col cols="12">
      <v-card width="100%" variant="outlined" border="thin" rounded="lg">
        <v-row no-gutters class="pa-6" align="center">
          <v-col cols="12" md="7" class="pr-md-8">
            <div class="text-subtitle-1 font-weight-medium">
              Early Start Allowance
            </div>
            <div class="text-body-2 text-medium-emphasis mt-1">
              The number of minutes before the scheduled time that a guard is
              allowed to click ‘Start Patrol’. For example,<br />
              if set to 10 minutes, a guard can start their 8:00 AM patrol as
              early as 7:50 AM.
            </div>
          </v-col>

          <v-col cols="12" md="5" class="d-flex justify-md-end mt-4">
            <v-text-field
              v-model="earlyStartAllowance"
              type="number"
              min="0"
              variant="outlined"
              density="default"
              suffix="mins"
              hide-details="auto"
              style="max-width: 167px"
            >
              <template #label>
                Early Start Allowance
                <span class="text-error">*</span>
              </template>
            </v-text-field>
          </v-col>
        </v-row>

        <v-row no-gutters class="pa-6 pt-0">
          <v-col cols="12" class="d-flex justify-end">
            <v-btn
              text="Save"
              color="primary"
              class="text-none"
              size="large"
              variant="flat"
              @click="submit"
              :loading="loading"
            />
          </v-col>
        </v-row>
      </v-card>
    </v-col>
    <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
  </v-row>
</template>

<script setup lang="ts">
import useNFCPatrolSettings from "../../composables/useNFCPatrolSettings";

const props = defineProps({
  site: {
    type: String,
    required: true,
  },
  siteName: {
    type: String,
    default: "",
  },
  orgId: {
    type: String,
    required: true,
  },
});

const loading = ref<boolean>(false);

const message = ref<string>("");
const messageSnackbar = ref<boolean>(false);
const messageColor = ref<string>("");

function handleError(error: any) {
  const errorMessage =
    error?.data?.message || error?.message || "An error occurred";
  showMessage(errorMessage, "error");
}

function showMessage(msg: string, color: string) {
  message.value = msg;
  messageColor.value = color;
  messageSnackbar.value = true;
}

const earlyStartAllowance = ref<any>(0);

const {
  getBySite: getNfcPatrolSettings,
  updateBySite: updateNfcPatrolSettings,
} = useNFCPatrolSettings();

const { data: nfcPatrolSetting } = await useLazyAsyncData(
  `fetch-nfc-patrol-settings-${props.site}`,
  async () => getNfcPatrolSettings(props.site)
);

watchEffect(() => {
  if (nfcPatrolSetting.value) {
    earlyStartAllowance.value = nfcPatrolSetting.value.earlyStartAllowance ?? 0;
  }
});

async function submit() {
  if (
    [null, ""].includes(earlyStartAllowance.value) ||
    earlyStartAllowance.value < 0
  )
    return showMessage("Please complete all required fields *", "error");

  loading.value = true;

  try {
    const response: any = await updateNfcPatrolSettings(props.site, {
      earlyStartAllowance: earlyStartAllowance.value,
    });
    showMessage(response.message, "success");
  } catch (error) {
    handleError(error);
  } finally {
    loading.value = false;
  }
}
</script>
