<template>
  <ul class="nav nav-tabs">
    <li v-if="containsPerson" class="nav-item">
      <a class="nav-link" :class="{ active: isActive('person') }">
        <label for="person">
          <input
            type="radio"
            name="person"
            id="person"
            v-model="radioType"
            value="person"
          />
          {{ trans(ONTHEFLY_CREATE_PERSON) }}
        </label>
      </a>
    </li>
    <li v-if="containsThirdParty" class="nav-item">
      <a class="nav-link" :class="{ active: isActive('thirdparty') }">
        <label for="thirdparty">
          <input
            type="radio"
            name="thirdparty"
            id="thirdparty"
            v-model="radioType"
            value="thirdparty"
          />
          {{ trans(ONTHEFLY_CREATE_THIRDPARTY) }}
        </label>
      </a>
    </li>
  </ul>

  <div class="my-4">
    <PersonEdit
      v-if="type === 'person'"
      action="create"
      :query="query"
      ref="castPerson"
      @onPersonCreated="onPersonCreated"
    />

    <ThirdPartyEdit
      v-if="type === 'thirdparty'"
      :action="action"
      :query="query"
      :parent="parent"
      ref="castThirdparty"
      @onThirdPartyCreated="onThirdPartyCreated"
      type=""
    />
  </div>
</template>
<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
import {
  ONTHEFLY_CREATE_PERSON,
  ONTHEFLY_CREATE_THIRDPARTY,
  trans,
} from "translator";
import { CreatableEntityType, Person } from "ChillPersonAssets/types";
import { CreateComponentConfig } from "ChillMainAssets/types";
import PersonEdit from "ChillPersonAssets/vuejs/_components/OnTheFly/PersonEdit.vue";
import ThirdPartyEdit from "ChillThirdPartyAssets/vuejs/_components/OnTheFly/ThirdPartyEdit.vue";
import { Thirdparty } from "../../../../../../ChillThirdPartyBundle/Resources/public/types";

const props = withDefaults(defineProps<CreateComponentConfig>(), {
  action: "create",
  query: "",
  parent: null,
});

const emit = defineEmits<{
  (e: "onPersonCreated", payload: { person: Person }): void;
  (e: "onThirdPartyCreated", payload: { thirdParty: Thirdparty }): void;
}>();

const type = ref<CreatableEntityType | null>(null);

const radioType = computed<CreatableEntityType | null>({
  get: () => type.value,
  set: (val: CreatableEntityType | null) => {
    type.value = val;
    console.log("## type:", val, ", action:", props.action);
  },
});

type PersonEditComponent = InstanceType<typeof PersonEdit>;
type ThirdPartyEditComponent = InstanceType<typeof ThirdPartyEdit>;

const castPerson = ref<PersonEditComponent | null>(null);
const castThirdparty = ref<ThirdPartyEditComponent | null>(null);

onMounted(() => {
  type.value =
    props.allowedTypes.length === 1 && props.allowedTypes.includes("thirdparty")
      ? "thirdparty"
      : "person";
});

function isActive(tab: CreatableEntityType) {
  return type.value === tab;
}

const containsThirdParty = computed<boolean>(() =>
  props.allowedTypes.includes("thirdparty"),
);
const containsPerson = computed<boolean>(() => {
  if (props.action === "addContact") {
    return false;
  }
  return props.allowedTypes.includes("person");
});

function save(): void {
  if (radioType.value === "person" && castPerson.value !== null) {
    castPerson.value.postPerson();
  } else if (
    radioType.value === "thirdparty" &&
    castThirdparty.value !== null
  ) {
    castThirdparty.value.postThirdParty();
  }
}

function onThirdPartyCreated(payload: { thirdParty: Thirdparty }) {
  emit("onThirdPartyCreated", payload);
}

function onPersonCreated(payload: { person: Person }) {
  emit("onPersonCreated", payload);
}

defineExpose({ save });
</script>

<style lang="css" scoped>
label {
  cursor: pointer;
}
</style>
