<template>
  <SelectWrapper
    class="country-select"
    v-model="state.keyword"
    :selected-item="state.selectedItem"
    v-bind="$props"
    @open="open"
    @close="close"
  >
    <ul class="main" v-if="state.active">
      <li class="search" v-if="props.search">
        <SpaceInput
          label=""
          :placeholder="$t('common.search')"
          v-model="state.keyword"
        >
          <img src="@/assets/icons/actions/search.svg" />
        </SpaceInput>
      </li>
      <li
        v-for="(item, index) in filteredList"
        :key="index"
        :class="{ selected: state.selectedItem === item.id }"
      >
        <div class="item" @click="selectItem(index)">
          <img class="flag" :src="item.imgUrl" :alt="'country-' + item.id" />
          <p class="name h600">{{ item.title }}</p>
        </div>
      </li>
    </ul>
  </SelectWrapper>
</template>

<script lang="ts">
import {
  computed,
  defineComponent,
  onMounted,
  PropType,
  reactive,
  watch,
} from "vue";
import { SelectInterface } from "@/models";
import FormMixin from "@/mixins/FormMixin";
export default defineComponent({
  mixins: [FormMixin],
  props: {
    list: {
      type: Array as PropType<SelectInterface[]>,
      default: [],
    },
    modelValue: {
      default: "",
    },
  },
  setup(props: any, { emit }) {
    const state = reactive<{
      active: boolean;
      keyword: string;
      selectedItem: {
        title: string;
        imgUrl?: string;
      } | null;
      selectedId: any;
    }>({
      active: false,
      keyword: "",
      selectedItem: null,
      selectedId: null,
    });

    const filteredList = computed((): SelectInterface[] => {
      if (state.keyword.length <= 0) {
        return props.list;
      }
      return props.list.filter((item: any) =>
        item.title.toLowerCase().includes(state.keyword.toLowerCase())
      );
    });

    const selectItem = (index: number): void => {
      state.selectedItem = {
        title: filteredList.value[index].title,
        imgUrl: filteredList.value[index].imgUrl,
      };
      state.selectedId = filteredList.value[index].id;
      emit("update:modelValue", state.selectedId);
    };

    const open = (): void => {
      state.keyword = "";
      state.active = true;
    };

    const close = (): void => {
      state.active = false;
    };

    const setValue = (): void => {
      if (typeof props.modelValue === "object") {
        filteredList.value.find((item, index) => {
          for (const key in props.modelValue) {
            if (item.id[key] !== props.modelValue[key]) {
              return false;
            }
          }

          selectItem(index);
          return true;
        });
      } else {
        filteredList.value.find((item, index) => {
          if (item.id === props.modelValue) {
            selectItem(index);
          }
        });
      }
    };

    onMounted((): void => {
      if (props.modelValue) {
        props.list.find((item: any, index: any) => {
          if (item.id === props.modelValue) {
            selectItem(index);
            return true;
          }

          return false;
        });
      }
    });

    watch(
      (): any => props.modelValue,
      (val: string, oldVal: string): void => {
        if (val !== oldVal) {
          props.list.find((item: any, index: any) => {
            if (item.id === props.modelValue) {
              selectItem(index);
              return true;
            }
            return false;
          });
        }
      }
    );
    return {
      open,
      close,
      state,
      props,
      selectItem,
      filteredList,
      setValue,
    };
  },
});
</script>

<style lang="scss">
.country-select {
  ul {
    li {
      .flag {
        width: 24px;
        margin-right: 16px;
      }
    }
  }
}
</style>
