<script setup>

import { computed } from 'vue';

const model = defineModel({ type: [String, null], default: null });

const props = defineProps({
  multiline: {
    type: Boolean,
    default: false
  }
});

const maskText = String.fromCharCode(0x25CF).repeat(8);

const displayValue = computed({
  get() {
    return model.value === null ? maskText : model.value;
  },
  set(v) {
    if (model.value === null && v === maskText) return;
    model.value = v;
  },
});

</script>

<template>
  <template v-if="!multiline">
    <input class="pankow-masked-input" :value="displayValue" @input="displayValue = $event.target.value" @focus="$event.target.select()" />
  </template>
  <template v-else>
    <textarea :value="displayValue" @input="displayValue = $event.target.value" @focus="$event.target.select()"></textarea>
  </template>
</template>

<style>

.pankow-masked-input {
  display: inline-block;
  font-size: 14px;
  color: var(--pankow-text-color);
  background-color: var(--pankow-input-background-color);
  padding: var(--pankow-input-vertial-padding) var(--pankow-input-horizontal-padding);
  border-radius: var(--pankow-border-radius);
  border-style: solid;
  border-width: 1px;
  border-color: var(--pankow-input-border-color);
  transition: border-color 250ms;
}

.pankow-form-group.has-error .pankow-masked-input,
.pankow-masked-input.has-error {
  color: var(--pankow-text-color);
  border-color: var(--pankow-color-danger) !important;
}

.pankow-masked-input:hover {
  border-color: var(--pankow-input-border-color-hover);
}

.pankow-masked-input:focus {
  border-color: var(--pankow-input-border-color-focus);
  outline: none;
}

.pankow-masked-input[readonly] {
  cursor: not-allowed;
  border-color: var(--pankow-input-border-color) !important;
  background-color: #f5f5f5;
}

.pankow-masked-input:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

</style>