<template>
  <div
    v-if="icon && clearable && hasValue"
    class="mc-left-icon-input mc-input-with-both-icons"
    :class="rootClass"
  >
    <MTextInputIcon :icon="icon" />
    <MTextInputField
      ref="mField"
      :class="textInputFieldClass"
      v-bind="{ ...$attrs, ...$props }"
      @update:model-value="updateValue"
    />
    <div class="mc-clear-icon" @click="clearInput">
      <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
        <path
          d="M12.854 4.354a.5.5 0 0 0-.708-.708L8 7.793 3.854 3.646a.5.5 0 1 0-.708.708L7.293 8.5l-4.147 4.146a.5.5 0 0 0 .708.708L8 9.207l4.146 4.147a.5.5 0 0 0 .708-.708L8.707 8.5l4.147-4.146z"
        />
      </svg>
    </div>
  </div>

  <div v-else-if="icon" class="mc-left-icon-input" :class="rootClass">
    <MTextInputIcon :icon="icon" />
    <MTextInputField
      ref="mField"
      :class="textInputFieldClass"
      v-bind="{ ...$attrs, ...$props }"
      @update:model-value="updateValue"
    />
  </div>

  <div v-else-if="clearable && hasValue" class="mc-right-icon-input">
    <MTextInputField
      ref="mField"
      v-bind="{ ...$attrs, ...$props }"
      @update:model-value="updateValue"
    />
    <div class="mc-clear-icon" @click="clearInput">
      <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
        <path
          d="M12.854 4.354a.5.5 0 0 0-.708-.708L8 7.793 3.854 3.646a.5.5 0 1 0-.708.708L7.293 8.5l-4.147 4.146a.5.5 0 0 0 .708.708L8 9.207l4.146 4.147a.5.5 0 0 0 .708-.708L8.707 8.5l4.147-4.146z"
        />
      </svg>
    </div>
  </div>

  <MTextInputField
    v-else
    ref="mField"
    v-bind="{ ...$attrs, ...$props }"
    @update:model-value="updateValue"
  />
</template>

<script>
import MTextInputField from './MTextInputField.vue';
import MTextInputIcon from './MTextInputIcon.vue';

/**
 * > Inputs are used to create input fields with text on a single line. Their states depends on the user interaction or the context.
 *
 * The `MTextInput` component is the **Vue.js** implementation of the **Text input** component of Mozaic Design System.<br/>
 * The full specification of this component is available in [the associated documentation](https://mozaic.adeo.cloud/components/form/text-input/).
 */
export default {
  name: 'MTextInput',
  components: {
    MTextInputField,
    MTextInputIcon,
  },
  inheritAttrs: false,
  props: {
    /**
     * Displays an illustration icon in the input. _(Note that this icon is not clickable)_
     * @see [Available icons](https://mozaic.adeo.cloud/foundations/icons/)
     */
    icon: {
      type: String,
      default: null,
    },
    /**
     * Allows to place a CSS class on the root element of the component. _(To be used only if the prop icon is used)_
     */
    rootClass: {
      type: String,
      default: null,
    },
    /**
     * Allows to place a CSS class on the input element. _(To be used only if the prop icon is used)_
     */
    textInputFieldClass: {
      type: String,
      default: null,
    },
    /**
     * Shows a clear button (X) when the input has a value, allowing users to quickly clear the input
     */
    clearable: {
      type: Boolean,
      default: false,
    },
    /**
     * The input value (for v-model)
     */
    modelValue: {
      type: [String, Number],
      default: '',
    },
  },
  emits: ['update:modelValue'],
  data() {
    return {
      inputValue: this.modelValue,
    };
  },
  computed: {
    hasValue() {
      return (
        this.inputValue !== null &&
        this.inputValue !== undefined &&
        this.inputValue !== ''
      );
    },
  },
  watch: {
    modelValue(newValue) {
      this.inputValue = newValue;
    },
  },
  methods: {
    updateValue(newValue) {
      this.inputValue = newValue;
      this.$emit('update:modelValue', newValue);
    },
    clearInput() {
      this.inputValue = '';
      this.$emit('update:modelValue', '');
      // Focus back to the input after clearing
      if (this.$refs.mField && this.$refs.mField.$el) {
        this.$refs.mField.$el.focus();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.mc-clear-icon {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  transition: color 0.2s ease;
  padding: 8px;
  border-radius: 4px;
  min-width: 32px;
  height: 32px;

  &:hover {
    color: #333;
    background-color: rgba(0, 0, 0, 0.08);
  }

  &:active {
    background-color: rgba(0, 0, 0, 0.12);
  }

  svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
  }
}

.mc-right-icon-input {
  position: relative;
  display: flex;
  align-items: center;

  .mc-clear-icon {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
  }

  :deep(.mc-text-input) {
    padding-right: 48px !important; /* Espace pour la croix */
  }
}

.mc-input-with-both-icons {
  position: relative;
  display: flex;
  align-items: center;

  .mc-clear-icon {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
  }

  :deep(.mc-text-input) {
    padding-right: 48px !important; /* Espace pour la croix */
  }
}

/* S'assurer que le input avec icône à gauche a aussi l'espace pour la croix */
.mc-left-icon-input.mc-input-with-both-icons {
  :deep(.mc-left-icon-input__input) {
    padding-right: 48px !important;
  }
}
</style>
