<script setup>
import { computed, defineProps } from "vue";
import { twMerge } from "tailwind-merge";

const props = defineProps({
  label: String,
  name: String,
  placeholder: {
    type: String,
    default: "",
  },
  value: String,
  isTopLabelExist: {
    type: Boolean,
    default: true,
  },
  isBottomLabelExist: {
    type: Boolean,
    default: true,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  required: {
    type: Boolean,
    default: false,
  },
  readonly: {
    type: Boolean,
    default: false,
  },
  className: String,
  width: String,
  type: {
    default: "text",
    type: String,
  },
});

const curWidth = computed(() => {
  if (props.width) {
    return {
      style: {
        width: `${props.width}px`,
      },
      class: "",
    };
  } else {
    return {
      class: "w-80 max-w-sm",
    };
  }
});
</script>

<template>
  <label
    :class="twMerge('form-control', className, curWidth.class)"
    :style="curWidth.style"
  >
    <div :class="twMerge(isTopLabelExist ? 'label' : '')">
      <span class="label-text text-lg"><slot name="topLeft"></slot></span>
      <span class="label-text-alt"> <slot name="topRight"></slot></span>
    </div>
    <slot name="icon"> </slot>
    <input
      v-if="name"
      :type="type"
      :name="name || 'input'"
      :placeholder="placeholder"
      v-model="value[name]"
      :disabled="disabled"
      :readonly="readonly"
      :required="required"
      class="text-lg text-white bg-transparent w-full input input-bordered rounded-md px-3 border-info focus-within:border-info read-only:bg-base-300 read-only:text-zinc-300 read-only:border-0 read-only:focus-within:outline-0 read-only:focus:outline-0"
    />
    <input
      v-else
      type="text"
      :name="name || 'input'"
      :placeholder="placeholder"
      :value="value"
      :disabled="disabled"
      :readonly="readonly"
      :required="required"
      class="text-lg text-white bg-transparent w-full input input-bordered rounded-md px-3 border-info focus-within:border-info read-only:bg-base-300 read-only:text-zinc-500 read-only:border-0 read-only:focus-within:outline-0 read-only:focus:outline-0"
    />
    <div :class="twMerge(isBottomLabelExist ? 'label' : '')">
      <span class="label-text-alt"><slot name="bottomLeft"></slot></span>
      <span class="label-text-alt"><slot name="bottomRight"></slot></span>
    </div>
  </label>
</template>

<style lang="scss" scoped></style>
