<script setup>
import { ref, onMounted, watch, defineProps, inject, readonly } from "vue";
import useFormErrorMessage from "@/hooks/useFormErrorMessage";
import { postDeviceItem } from "@/apis/asset";
import { useI18n } from "vue-i18n";
import * as yup from "yup";
const { openToast } = inject("app_toast");
const { t } = useI18n();
const props = defineProps({
  getData: Function,
  openModal: Function,
  editRecord: Object,
  variable_id: Number,
});
const form = ref(null);
const formState = ref({
  id: 0,
  variable_id: props.variable_id,
  full_name: "",
  points: "",
  decimals: 0,
  is_bool: 0,
  is_link: 0,
});
let schema = ref(
  yup.object({
    full_name: yup.string().required(t("button.required")),
    decimals: yup.number().required(t("button.required")),
    is_bool: yup.number().required(t("button.required")),
    is_link: yup.number().required(t("button.required")),
  })
);

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

const onOk = async () => {
  const values = await handleSubmit(schema.value, formState.value);
  console.log("value", values);
  const res = await postDeviceItem({
    ...values,
    decimals: Number(values.decimals),
    is_bool: Number(values.is_bool),
    is_link: Number(values.is_link),
  });
  if (res.isSuccess) {
    props.getData(props.variable_id);
    onCancel();
  } else {
    openToast("error", res.msg, "#point_list_item");
  }
};

const onCancel = () => {
  point_list_item.close();
};

watch(
  () => props.editRecord,
  (newValue) => {
    if (newValue) {
      formState.value = {
        ...newValue,
      };
    } else {
      formState.value = {
        id: 0,
        variable_id: props.variable_id,
        full_name: "",
        points: "",
        decimals: 0,
        is_bool: 0,
        is_link: 0,
      };
    }
  }
);
</script>

<template>
  <button class="btn btn-sm btn-add mr-3" @click.stop.prevent="props.openModal">
    <font-awesome-icon :icon="['fas', 'plus']" />{{ $t("button.add") }}
  </button>
  <Modal id="point_list_item" title="Points" :onCancel="onCancel" :width="710">
    <template #modalContent>
      <form ref="form" class="mt-5 w-full flex flex-wrap justify-between">
        <Input :value="formState" class="my-2" name="full_name">
          <template #topLeft>{{ $t("setting.IoT_point_name") }}</template>
          <template #bottomLeft
            ><span class="text-error text-base">
              {{ formErrorMsg.full_name }}
            </span></template
          ></Input
        >
        <Input
          :value="formState"
          class="my-2"
          name="points"
          :disabled="props.editRecord?.id"
        >
          <template #topLeft>{{ $t("setting.IoT_point_code") }}</template>
          <template #bottomLeft
            ><span class="text-error text-base">
              {{ formErrorMsg.points }}
            </span></template
          ></Input
        >
        <InputNumber :value="formState" class="my-2" name="decimals">
          <template #topLeft>{{
            $t("setting.number_of_decimal_places")
          }}</template>
        </InputNumber>
        <RadioGroup
          class="my-2"
          name="is_bool"
          :value="formState"
          :items="[
            {
              key: 1,
              value: 1,
              title: $t('alert.yes'),
            },
            {
              key: 0,
              value: 0,
              title: $t('alert.no'),
            },
          ]"
          :required="true"
        >
          <template #topLeft>{{ $t("setting.boolean_value") }}</template>
        </RadioGroup>

        <RadioGroup
          class="my-2"
          name="is_link"
          :value="formState"
          :items="[
            {
              key: 1,
              value: 1,
              title: $t('alert.yes'),
            },
            {
              key: 0,
              value: 0,
              title: $t('alert.no'),
            },
          ]"
          :required="true"
        >
          <template #topLeft>{{ $t("setting.hide_point") }}</template>
        </RadioGroup>
      </form>
    </template>
    <template #modalAction>
      <button
        type="reset"
        class="btn btn-outline-success mr-2"
        @click.prevent="onCancel"
      >
        {{ $t("button.cancel") }}
      </button>
      <button
        type="submit"
        class="btn btn-outline-success"
        @click.stop.prevent="onOk"
      >
        {{ $t("button.submit") }}
      </button>
    </template>
  </Modal>
</template>

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