<script setup>
import { inject, defineProps, watch, ref } from "vue";
import useFormErrorMessage from "@/hooks/useFormErrorMessage";
import { postEditDemand } from "@/apis/energy";
import * as yup from "yup";
import { useI18n } from "vue-i18n";
import useBuildingStore from "@/stores/useBuildingStore";
const store = useBuildingStore();
const { t } = useI18n();
const { openToast } = inject("app_toast");
const props = defineProps({
  demandData: Object,
  getData: Function,
});

let scheme = yup.object({
  contract: yup.number().required(t("button.required")),
  alert: yup.number().required(t("button.required")),
  reset: yup.number().required(t("button.required")),
});

const form = ref(null);
const formState = ref({
  contract: null,
  alert: null,
  reset: null,
});

const { formErrorMsg, handleSubmit, handleErrorReset } = useFormErrorMessage(
  scheme.value
);

watch(
  () => props.demandData,
  (newValue) => {
    if (newValue) {
      formState.value = {
        ...newValue,
      };
    }
  }
);

const onOk = async () => {
  const values = await handleSubmit(scheme, formState.value);

  const res = await postEditDemand({
    ...values,
    "building_guid":store.selectedBuilding.building_guid,
  });
  if (res.isSuccess) {
    props.getData();
    closeModal();
  } else {
    openToast("error", res.msg, "#immediate_demand_add_item");
  }
};

const closeModal = () => {
  handleErrorReset();
  onCancel();
};

const openModal = () => {
  immediate_demand_add_item.showModal();
};

const onCancel = () => {
  immediate_demand_add_item.close();
};
</script>

<template>
  <button
    class="btn btn-sm btn-success ms-auto me-6 my-3"
    @click.stop.prevent="openModal"
  >
    {{ $t("button.edit") }}
  </button>
  <Modal
    id="immediate_demand_add_item"
    :title="t('energy.edit_automatic_demand')"
    :onCancel="closeModal"
    width="400"
  >
    <template #modalContent>
      <form ref="form" class="mt-5 flex flex-col items-center">
        <Input :value="formState" class="w-full" name="contract">
          <template #topLeft>{{ $t("energy.contract_capacity") }}</template>
          <template #bottomLeft>
            <span class="text-error text-base">
              {{ formErrorMsg.contract }}
            </span>
          </template>
        </Input>
        <Input class="w-full" :value="formState" name="alert">
          <template #topLeft>{{ $t("energy.alert_capacity") }}</template>
          <template #bottomLeft>
            <span class="text-error text-base">
              {{ formErrorMsg.alert }}
            </span>
          </template>
        </Input>
        <Input class="w-full" :value="formState" name="reset">
          <template #topLeft>{{ $t("energy.reset_value") }}</template>
          <template #bottomLeft>
            <span class="text-error text-base">
              {{ formErrorMsg.reset }}
            </span>
          </template>
        </Input>
      </form>
    </template>
    <template #modalAction>
      <button
        type="reset"
        class="btn btn-outline-success mr-2"
        @click.prevent="closeModal"
      >
        {{ $t("button.cancel") }}
      </button>
      <button
        type="submit"
        class="btn btn-outline-success"
        @click.prevent="onOk"
      >
        {{ $t("button.submit") }}
      </button>
    </template>
  </Modal>
</template>

<style lang="scss" scoped></style>
