<template>
  <div
    :class="['chooser-element', subclass]"
    :data-cy="cy"
    @click="emit('select')"
  >
    <component
      class="chooser-element__icon"
      :is="realIcon"
    />
    <div class="chooser-element__title">
      {{ realTitle }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
 
interface Props {
  type: string;
  icon: string;
  title: string;
}

const props = withDefaults(defineProps<Props>(), {
  type: '',
});

const emit = defineEmits(['select']);

const defaultTitle = (type:string) => {
  return type.replace(/^\w/, (c :string) => c.toUpperCase());
}

const defaultIcon = (type:string) => {
  return `${type}-icon`;
}

const subclass =`chooser-element--${props.type}`; 
const cy = `choose-${props.type}-widget`;

const realTitle = computed(() => {
  return props.title || defaultTitle(props.type);
});
const realIcon = computed(() => {
  return props.icon || defaultIcon(props.type);
});
</script>

<script lang="ts">
import formElementIcons from '@/components/ui/form-element-icons';

export default {
  components: {
    ...formElementIcons,
  },
}
</script>

<style scoped lang="scss">
@import 'styles/helpers';

.chooser-element {
  cursor: pointer;
  border: 1px solid $color-silver;
  border-radius: 4px;
  height: 105px;
  width: 105px;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: 1fr 45px;
  justify-content: center;
  justify-items: center;
  align-items: center;

  &__icon {
    width: 40px;
    height: 40px;
    align-self: end;
  }
}
</style>
