<template>
  <sar-popout-input
    v-model="inputValue"
    :placeholder="placeholder"
    :readonly="readonly"
    :disabled="disabled"
    :clearable="clearable"
    @clear="onClear"
    @click="onInputClick"
    :validate-event="validateEvent"
  />

  <sar-popout
    :root-class="rootClass"
    :root-style="rootStyle"
    :visible="innerVisible"
    @update:visible="onVisible"
    :title="title ?? placeholder"
    @confirm="onConfirm"
    @visible-hook="onVisibleHook"
  >
    <template #visible="{ already }">
      <sar-picker
        v-if="already"
        :model-value="popoutValue"
        @update:model-value="onChange"
        :columns="columns"
        :option-keys="optionKeys"
        :immediate-change="immediateChange"
      />
    </template>
  </sar-popout>
</template>

<script lang="ts">
import { defineComponent as _defineComponent } from "vue";
import { ref, watch, computed } from "vue";
import SarPopoutInput from "../popout-input/popout-input.vue";
import SarPopout from "../popout/popout.vue";
import SarPicker from "../picker/picker.vue";
import {
  defaultOptionKeys,
  getIndexesByValue,
  getInitialValue,
  getOptionsByIndexes,
  getValueOrLabelByOption
} from "../picker/common";
import { isNullish, toArray } from "../utils";
import { pickerInputProps } from "./common";
const __default__ = {
  options: {
    virtualHost: true,
    styleIsolation: "shared"
  }
};
export default /* @__PURE__ */ _defineComponent({
  ...__default__,
  __name: "picker-input",
  props: pickerInputProps,
  emits: ["update:visible", "update:model-value"],
  setup(__props, { expose: __expose, emit: __emit }) {
    __expose();
    const props = __props;
    const emit = __emit;
    const fieldKeys = computed(() => {
      return Object.assign({}, defaultOptionKeys, props.optionKeys);
    });
    const innerValue = ref(props.modelValue);
    watch(
      () => props.modelValue,
      () => {
        innerValue.value = props.modelValue;
      }
    );
    const popoutValue = ref(props.modelValue);
    const onChange = (value) => {
      popoutValue.value = value;
    };
    const onVisibleHook = (name) => {
      if (name === "enter" && !isNullish(innerValue.value) && innerValue.value !== "" && popoutValue.value !== innerValue.value) {
        popoutValue.value = innerValue.value;
      }
    };
    const onConfirm = () => {
      if (isNullish(popoutValue.value) || popoutValue.value === "") {
        popoutValue.value = getInitialValue(props.columns, fieldKeys.value);
      }
      innerValue.value = popoutValue.value;
      emit("update:model-value", popoutValue.value);
      inputValue.value = getInputValue();
    };
    const inputValue = ref("");
    function getOutletText(columns, optionKeys, value) {
      const indexes = getIndexesByValue(toArray(value), columns || [], optionKeys);
      const options = getOptionsByIndexes(indexes, columns || [], optionKeys);
      const labels = options.map(
        (option) => getValueOrLabelByOption(option, optionKeys.label)
      );
      return labels.join("/");
    }
    function getInputValue() {
      if (isNullish(innerValue.value) || innerValue.value === "") {
        return "";
      }
      return getOutletText(props.columns, fieldKeys.value, innerValue.value);
    }
    watch(
      innerValue,
      () => {
        inputValue.value = getInputValue();
      },
      {
        immediate: true
      }
    );
    const onClear = () => {
      inputValue.value = "";
      innerValue.value = void 0;
      emit("update:model-value", void 0);
    };
    const innerVisible = ref(props.visible);
    watch(
      () => props.visible,
      () => {
        innerVisible.value = props.visible;
      }
    );
    const onVisible = (visible) => {
      innerVisible.value = visible;
      emit("update:visible", visible);
    };
    const onInputClick = () => {
      innerVisible.value = true;
      emit("update:visible", true);
    };
    const __returned__ = { props, emit, fieldKeys, innerValue, popoutValue, onChange, onVisibleHook, onConfirm, inputValue, getOutletText, getInputValue, onClear, innerVisible, onVisible, onInputClick, SarPopoutInput, SarPopout, SarPicker };
    return __returned__;
  }
});
</script>
