<script setup lang="ts">
import InputText from 'primevue/inputtext';
import Textarea from 'primevue/textarea';
import VHint from '../hint/VHint.vue';
import VDivider from '../divider/VDivider.vue';
import VLabel from '../label/VLabel.vue';
import type IVInput from './IVInput.type';
import { computed, useAttrs, useId, ref, watch } from 'vue';
import styles from '@visua/typography.module.css';
import Password from 'primevue/password';

const props = withDefaults(defineProps<IVInput>(), {
  id: () => useId(),
  descriptionId: undefined,
  hint: '',
  label: '',
  modelValue: '',
  wrapperClass: '',
  isInvalid: false,
  isValid: false,
  isTextarea: false,
  labelVisible: false,
  isPassword: false,
  weakLabel: 'Faible',
  mediumLabel: 'Moyen',
  strongLabel: 'Fort',
  promptLabel: 'Entrez un mot de passe',
  toggleMask: false,
  placeholder: '',
  passwordHint: undefined,
  disabled: false,
  errorMessage: '',
  validMessage: '',
})
const attrs = useAttrs()

// const props.disabled = computed(() => 'disabled' in attrs)

const emit = defineEmits([
  'update:modelValue',
  'value-change',
  'change'
])

const localModelValue = ref(props.modelValue);
watch(() => props.modelValue, (newVal) => {
  if(localModelValue.value !== newVal) {
        localModelValue.value = newVal;
    }
});
watch(localModelValue, (newVal) => {
    if(props.modelValue !== newVal){
        emit('update:modelValue', newVal);
    }
});



const labelState = computed(() => {
  if(!props.isInvalid && !props.isValid && !props.disabled) return 'default';
  else if(!props.isInvalid && props.isValid && !props.disabled) return 'success';
  else if(props.isInvalid && !props.isValid && !props.disabled) return 'error';
  else return undefined
})

</script>

<template>
  <div class="main-container">
    <VLabel
      v-if="props.labelVisible"
      :for="props.id"
      :label="props.label"
      :required="!props.disabled"
      :disabled="props.disabled"
      :type="labelState"
      :hint="props.hint"
    >
      <template #required-type v-if="props.required">
        <slot name="required-type"/>
      </template>
    </VLabel>
    <!-- Password -->
    <Password
      v-if="props.isPassword"
      :id="props.id"
      v-bind="attrs"
      :class="[styles['text-body-MD-standard-text-Regular'], {
        'p-password': true,
        'error': props.isInvalid && !props.isValid && !props.disabled,
        'success': !props.isInvalid && props.isValid && !props.disabled,
      }]"
      :disabled="props.disabled"
      :aria-disabled="props.disabled"
      :aria-describedby="descriptionId || undefined"
      :weakLabel="props.weakLabel"
      :mediumLabel="props.mediumLabel"
      :strongLabel="props.strongLabel"
      :promptLabel="props.promptLabel"
      :toggleMask="props.toggleMask"
      :placeholder="props.placeholder"
      :fluid="true"
      v-model:model-value="localModelValue"
      @update:model-value="emit('update:modelValue', $event)"
      @valueChange="emit('value-change', $event)"
      @change="emit('change', $event)"
    >
      <template #header>
        <div
          :class="styles['text-body-MD-standard-text-Medium']"
          style="padding-bottom: 0.5rem;"
        >Niveau de complexité</div>
      </template>
      <template v-if="props.passwordHint !== undefined" #footer>
        <VDivider/>
        <VHint title="Votre mot de passe doit contenir au moins :"/>
        <div
          role="alert"
          aria-live="polite"
        >
          <template v-if="Array.isArray(props.passwordHint)">
            <VHint
              v-for="message in props.passwordHint"
              :key="`password-hint-${message}`"
              :id="descriptionId"
              :data-testid="descriptionId"
              :title="message"
              type="info"
              icon
            />
          </template>
          <VHint
            v-else-if="props.passwordHint"
            :title="props.passwordHint"
            :id="descriptionId"
            :data-testid="descriptionId"
            type="info"
            icon
          />
        </div>
      </template>
    </Password>

    <!-- Textarea -->
    <Textarea
      v-else-if="props.isTextarea"
      :id="props.id"
      v-bind="attrs"
      :class="[styles['text-body-MD-standard-text-Regular'], {
        'p-textarea': true,
        'error': props.isInvalid && !props.isValid && !props.disabled,
        'success': !props.isInvalid && props.isValid && !props.disabled,
      }]"
      :disabled="props.disabled"
      :aria-disabled="props.disabled"
      :aria-describedby="descriptionId || undefined"
      :placeholder="props.placeholder"
      @valueChange="emit('value-change', $event)"
    />

    <!-- InputText -->
    <InputText
      v-else
      :id="props.id"
      v-bind="attrs"
      :class="[styles['text-body-MD-standard-text-Regular'], {
        'p-inputtext': true,
        'error': props.isInvalid && !props.isValid && !props.disabled || !!props.errorMessage,
        'success': !props.isInvalid && props.isValid && !props.disabled && !props.errorMessage,
      }]"
      :disabled="props.disabled"
      :aria-disabled="props.disabled"
      :aria-describedby="descriptionId || undefined"
      :placeholder="props.placeholder"
      v-model:model-value="localModelValue"
      @update:model-value="emit('update:modelValue', $event)"
      @valueChange="emit('value-change', $event)"
    />
      <div
    role="alert"
    aria-live="polite"
  >
    <template v-if="Array.isArray(props.errorMessage) && props.isInvalid">
      <VHint
        v-for="message in props.errorMessage"
        :id="descriptionId"
        :key="message"
        :data-testid="descriptionId"
        :title="message"
        type="alert"
        icon
      />
    </template>
    <VHint
      v-else-if="errorMessage && props.isInvalid"
      :id="descriptionId"
      :key="`error-${errorMessage}`"
      :data-testid="descriptionId"
      :title="`${errorMessage}`"
      type="alert"
      icon
    />
    <template v-if="Array.isArray(props.validMessage) && props.isValid">
      <VHint
        v-for="message in props.validMessage"
        :id="descriptionId"
        :key="message"
        :data-testid="descriptionId"
        :title="message"
        type="success"
        icon
      />
    </template>
    <VHint
      v-else-if="validMessage && props.isValid"
      :id="descriptionId"
      :key="`error-${validMessage}`"
      :data-testid="descriptionId"
      :title="`${validMessage}`"
      type="success"
      icon
    />
  </div>
  </div>
</template>

<style lang="css" scoped>

.main-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 0.5rem;
}

.p-textarea {
  min-height: 5.5rem;
  max-height: fit-content;
}

.p-password,
.p-inputtext { height: 2.5rem;}

.p-password,
.p-textarea,
.p-inputtext {width: inherit;}

.p-textarea,
.p-inputtext {border: var(--border-width) solid var(--input-border-color);}

.p-password.success, .p-password.success:focus-visible, .p-password.success:hover,
.p-textarea.success, .p-textarea.success:focus-visible, .p-textarea.success:hover,
.p-inputtext.success, .p-inputtext.success:focus-visible, .p-inputtext.success:hover {border: var(--large-border-width) solid var(--border-plain-success);}

.p-password.success, .p-password.success:focus-visible, .p-password.success:hover,
.p-textarea.error, .p-textarea.error:focus-visible, .p-textarea.error:hover,
.p-inputtext.error, .p-inputtext.error:focus-visible, .p-inputtext.error:hover {border: var(--large-border-width) solid var(--border-plain-error);}

.p-password:disabled,
.p-textarea:disabled,
.p-inputtext:disabled {
  border-color: var(--border-disabled-grey);
  color: var(--text-disabled-grey);
  background-color: var(--background-disabled-grey);
  --p-inputtext-placeholder-color: var(--text-disabled-grey);
  --p-form-field-placeholder-color: var(--text-disabled-grey);
  --p-textarea-placeholder-color: var(--text-disabled-grey);
}

</style>
