<script setup>
import { ref, onMounted, defineProps, inject, watch } from "vue";
import * as yup from "yup";
import "yup-phone-lite";
import useFormErrorMessage from "@/hooks/useFormErrorMessage";
import {
  postOperationCompany,
  updateOperationCompany,
} from "@/apis/operation";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const { openToast } = inject("app_toast");

const props = defineProps({
  formState: Object,
  getData: Function,
  openModal: Function
});

const deptScheme = yup.object({
  name: yup.string().required(t("button.required")),
  contact_person: yup.string().nullable(true),
  email: yup.string().email().nullable(true),
  phone: yup.string().nullable(true),
  city: yup.string().nullable(true),
  address: yup.string().nullable(true),
  tax_id_number: yup.string().nullable(true),
  remark: yup.string().nullable(true),
});

const { formErrorMsg, handleSubmit, handleErrorReset, updateScheme } =
  useFormErrorMessage(deptScheme);

const onCancel = () => {
  handleErrorReset();
  company_modal.close();
};

const onOk = async () => {
  const value = await handleSubmit(deptScheme, props.formState);
  let res;
  if (props.formState?.id) {
    res = await updateOperationCompany(value);
  } else {
    res = await postOperationCompany(value);
  }
  if (res.isSuccess) {
    props.getData();
    onCancel();
  } else {
    openToast("error", res.msg, "#company_modal");
  }
};
</script>

<template>
   <button class="btn btn-sm btn-add " @click.stop.prevent="props.openModal">
    <font-awesome-icon :icon="['fas', 'plus']" />{{ $t("button.add") }}
  </button>
  <Modal
    id="company_modal"
    :title="props.formState?.id ? t('button.edit') : t('button.add')"
    :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="name">
          <template #topLeft>{{ $t("operation.name") }}</template>
          <template #bottomLeft
            ><span class="text-error text-base">
              {{ formErrorMsg.name }}
            </span></template
          ></Input
        >
        <Input :value="formState" class="my-2" name="contact_person">
          <template #topLeft>{{ $t("operation.contact_person") }}</template>
          <template #bottomLeft
            ><span class="text-error text-base">
              {{ formErrorMsg.contact_person }}
            </span></template
          ></Input
        >
        <Input :value="formState" class="my-2" name="phone">
          <template #topLeft>{{ $t("operation.phone") }}</template>
          <template #bottomLeft
            ><span class="text-error text-base">
              {{ formErrorMsg.phone }}
            </span></template
          ></Input
        >
        <Input :value="formState" class="my-2" name="email">
          <template #topLeft>{{ $t("operation.email") }}</template>
          <template #bottomLeft
            ><span class="text-error text-base">
              {{ formErrorMsg.email }}
            </span></template
          ></Input
        >
        <Input :value="formState" class="my-2" name="city">
          <template #topLeft>{{ $t("operation.city") }}</template>
          <template #bottomLeft
            ><span class="text-error text-base">
              {{ formErrorMsg.city }}
            </span></template
          ></Input
        >
        <Input :value="formState" class="my-2" name="address">
          <template #topLeft>{{ $t("operation.address") }}</template>
          <template #bottomLeft
            ><span class="text-error text-base">
              {{ formErrorMsg.address }}
            </span></template
          ></Input
        >
        <Input :value="formState" class="my-2" name="tax_id_number">
          <template #topLeft>{{ $t("operation.tax_id_number") }}</template>
          <template #bottomLeft
            ><span class="text-error text-base">
              {{ formErrorMsg.tax_id_number }}
            </span></template
          ></Input
        >
        <Input :value="formState" class="my-2" name="remark">
          <template #topLeft>{{ $t("operation.remark") }}</template>
          <template #bottomLeft
            ><span class="text-error text-base">
              {{ formErrorMsg.remark }}
            </span></template
          ></Input
        >
        
      </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>
