import { defineComponent, onMounted, ref } from 'vue'

import { tools } from '@src/store/Modules/tools'
import { shared_consts } from '@src/common/shared_vuejs'
import { emit } from 'process'

export default defineComponent({
  name: 'CSelectAnimation',
  emits: ['update:modelValue'],
  props: {
    modelValue: {
      type: String,
      required: true,
      default: '',
    },
    label: {
      type: String,
      required: false,
      default: '',
    },
  },

  setup(props, { emit }) {

    const myclass = ref('')
    const animType = ref('')
    const animSpeed = ref('')
    const animDelay = ref('')

    function updateClass() {

      let mycl = ''

      myclass.value = 'animate__animated ' + animType.value + ' ' + animSpeed.value + ' ' + animDelay.value

      emit('update:modelValue', myclass.value)
    }

    function mounted() {

      const myarr = props.modelValue.split(' ')

      animType.value = tools.findFirstElemInCommon(tools.SelectListAnimation, myarr)
      animSpeed.value = tools.findFirstElemInCommon(tools.SelectListSpeed, myarr)
      animDelay.value = tools.findFirstElemInCommon(tools.SelectListDelay, myarr)

    }

    onMounted(mounted)

    return {
      tools,
      updateClass,
      animType,
      animSpeed,
      animDelay,
    }
  },

})