<template lang="pug">
  base-input-container.gap-y-2(:label="label", :style="{width: width + 'px' }")
    q-input(
      v-model="value",
      :name="name",
      :multiple="multiple"
      :class="{'circle': circle, 'font-input': true, 'doc': doc}",
      :input-style="{ color: textColor, borderColor: borderColor, resize: resize, fontSize: fontSize, fontWeight: fontWeight, lineHeight: lineHeight}",
      :borderless="borderless",
      :placeholder="placeholder",
      :outlined="outlined",
      :dense="dense",
      :type="type",
      :readonly="readonly",
      :disable="disabled",
      :filled="filled",
      :bg-color="filled || standout ? '' : 'white'",
      :rules="rule",
      :lazy-rules="lazyRule",
      :item-aligned="itemAligned",
      :no-error-icon="noErrorIcon",
      :mask="mask",
      :maxlength="maxLength",
      :autogrow="autogrow",
      :square="square",
      :standout="standout"
      :accept="accept",
      :debounce="debounce",
      :shadow-text="shadowText"
      hide-bottom-space
    )
      template(v-slot:prepend, v-if="iconLeft")
        slot
      slot.cursor-pointer(v-if="!iconLeft")
</template>

<script>
import BaseInputContainer from "@/components/base/BaseInputContainer.vue";

export default {
  name: "BaseInput",
  components: { BaseInputContainer },
  props: {
    multiple: Boolean,
    circle: Boolean,
    doc: Boolean,
    dense: {
      type: Boolean,
      default: true,
    },
    fontSize: {
      type: String,
      default: "14px",
    },
    fontWeight: {
      type: Number,
      default: 500,
    },
    lineHeight: {
      type: String,
      default: "19px",
    },
    outlined: {
      type: Boolean,
      default: false,
    },
    square: {
      type: Boolean,
      default: false,
    },
    filled: {
      type: Boolean,
      default: false,
    },
    borderless: {
      type: Boolean,
      default: false,
    },
    autogrow: {
      type: Boolean,
      default: false,
    },
    type: {
      default: "text",
    },
    standout: {
      type: [Boolean, String],
      default: false,
    },
    accept: {
      type: String,
      default: "",
    },
    resize: {
      type: String,
      default: "none",
    },
    shadowText: String,
    mask: String,
    debounce: [String, Number],
    width: Number,
    maxLength: Number,
    textColor: String,
    borderColor: String,
    rule: Array,
    lazyRule: [Boolean, String],
    noErrorIcon: Boolean,
    itemAligned: Boolean,
    modelValue: [String, Date, Number],
    placeholder: String,
    disabled: Boolean,
    label: String,
    readonly: Boolean,
    iconLeft: Boolean,
    name: String,
  },
  emits: ["update:modelValue"],
  computed: {
    value: {
      get() {
        if (this.type === "date") {
          return this.modelValue
            ? this.modelValue?.toISOString().split("T")[0]
            : null;
        }
        return this.modelValue;
      },
      set(value) {
        this.type === "date"
          ? this.$emit("update:modelValue", value ? new Date(value) : null)
          : this.$emit("update:modelValue", value);
      },
    },
  },
};
</script>

<style lang="sass" scoped>
.font-input
  font-feature-settings: 'pnum' on, 'lnum' on

.circle
  width: 100%
  height: 100%
  border-radius: 50%
  z-index: 5
  opacity: 0
  cursor: pointer

.doc
  width: 100%
  height: 100%
  z-index: 5
  opacity: 0
  cursor: pointer
  ::file-selector-button
    cursor: pointer
</style>
<style lang="sass">
.q-field--standout.q-field--readonly .q-field__control:before
  border: none !important
.q-field--standout .q-field__control
  background: var(--bg-light-grey) !important
</style>
