import { defineComponent, ref, watch, resolveComponent, openBlock, createElementBlock, createBlock, withCtx, renderSlot, createCommentVNode, createElementVNode, normalizeClass, withDirectives, vModelDynamic, createVNode, createTextVNode, toDisplayString } from 'vue';
import { s as script$1 } from './normalText-66005fcf.mjs';

var script = defineComponent({
    components: {
        TsNormalText: script$1,
    },
    props: {
        padding: {
            type: String,
            default: "py-3 px-3",
        },
        placeholder: {
            type: String,
            default: "",
        },
        customClass: {
            type: String,
            default: "",
        },
        hasTitle: {
            type: Boolean,
            default: false,
        },
        name: {
            type: String,
            default: "",
        },
        type: {
            type: String,
            default: "text",
        },
        rules: {
            type: Object,
            required: false,
        },
    },
    name: "TsTextField",
    emits: ["update:modelValue"],
    setup(props, context) {
        const content = ref("");
        watch(content, () => {
            context.emit("update:modelValue", content.value);
        });
        const validationStatus = ref(true);
        const errorMessage = ref("");
        const isRequired = () => {
            if (content.value) {
                validationStatus.value = true;
            }
            else {
                validationStatus.value = false;
                errorMessage.value = `${props.name} is required`;
            }
        };
        const isGreaterThan = (count) => {
            if (content.value.length > count) {
                validationStatus.value = true;
            }
            else {
                validationStatus.value = false;
                errorMessage.value = `${props.name} must be more than ${count} characters`;
            }
        };
        const isLessThan = (count) => {
            if (content.value.length < count) {
                validationStatus.value = true;
            }
            else {
                validationStatus.value = false;
                errorMessage.value = `${props.name} must be less than ${count} characters`;
            }
        };
        const isEqualsTo = (count) => {
            if (content.value.length == count) {
                validationStatus.value = true;
            }
            else {
                validationStatus.value = false;
                errorMessage.value = `${props.name} must be ${count} characters`;
            }
        };
        const isCondition = (condition, errMsg) => {
            if (condition) {
                validationStatus.value = true;
            }
            else {
                validationStatus.value = false;
                errorMessage.value = errMsg;
            }
        };
        const isGreaterThanOrEqualsTo = (count) => {
            if (content.value.length >= count) {
                validationStatus.value = true;
            }
            else {
                validationStatus.value = false;
                errorMessage.value = `${props.name} must be more than ${count - 1} characters`;
            }
        };
        const isLessThanOrEqualsTo = (count) => {
            if (content.value.length <= count) {
                validationStatus.value = true;
            }
            else {
                validationStatus.value = false;
                errorMessage.value = `${props.name} must be less than ${count + 1} characters`;
            }
        };
        const isRegex = (regex, errMsg) => {
            if (content.value.match(regex)) {
                validationStatus.value = true;
            }
            else {
                validationStatus.value = false;
                errorMessage.value = errMsg;
            }
        };
        const checkValidation = () => {
            if (props.rules) {
                for (let index = 0; index < props.rules.length; index++) {
                    const rule = props.rules[index];
                    if (rule.type == "isRequired") {
                        isRequired();
                    }
                    if (rule.type == "isGreaterThan") {
                        isGreaterThan(rule.value);
                    }
                    if (rule.type == "isLessThan") {
                        isLessThan(rule.value);
                    }
                    if (rule.type == "isEqualsTo") {
                        isEqualsTo(rule.value);
                    }
                    if (rule.type == "isGreaterThanOrEqualsTo") {
                        isGreaterThanOrEqualsTo(rule.value);
                    }
                    if (rule.type == "isLessThanOrEqualsTo") {
                        isLessThanOrEqualsTo(rule.value);
                    }
                    if (rule.type == "isRegex") {
                        isRegex(rule.value, rule.errorMessage);
                    }
                    if (rule.type == "isCondition") {
                        isCondition(rule.value, rule.errorMessage);
                    }
                }
            }
        };
        watch(content, () => {
            checkValidation();
        });
        const isNumber = (evt) => {
            if (props.type != "tel")
                return true;
            evt = evt ? evt : window.event;
            var charCode = evt.which ? evt.which : evt.keyCode;
            if (charCode > 31 &&
                (charCode < 48 || charCode > 57) &&
                charCode !== 46) {
                evt.preventDefault();
            }
            else {
                return true;
            }
        };
        return {
            content,
            checkValidation,
            isNumber,
            errorMessage,
            validationStatus,
        };
    },
});

const _hoisted_1 = { class: "flex w-full flex-col" };
const _hoisted_2 = { class: "w-full flex flex-row items-center" };
const _hoisted_3 = ["placeholder", "type"];
const _hoisted_4 = {
  key: 1,
  class: "w-full flex flex-row justify-end"
};

function render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_ts_normal_text = resolveComponent("ts-normal-text");

  return (openBlock(), createElementBlock("div", _hoisted_1, [
    (_ctx.hasTitle)
      ? (openBlock(), createBlock(_component_ts_normal_text, {
          key: 0,
          customClass: 'pb-2'
        }, {
          default: withCtx(() => [
            renderSlot(_ctx.$slots, "title")
          ]),
          _: 3 /* FORWARDED */
        }))
      : createCommentVNode("v-if", true),
    createElementVNode("div", _hoisted_2, [
      renderSlot(_ctx.$slots, "outer-prefix"),
      createElementVNode("div", {
        class: normalizeClass(`flew-grow w-full space-x-2 flex-row flex items-center justify-between ${_ctx.padding} ${_ctx.customClass} ${
          _ctx.validationStatus
            ? 'focus:!border-primaryPurple'
            : '!border-errorColor'
        } rounded`)
      }, [
        renderSlot(_ctx.$slots, "inner-prefix"),
        withDirectives(createElementVNode("input", {
          "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((_ctx.content) = $event)),
          placeholder: _ctx.placeholder,
          type: _ctx.type,
          onBlur: _cache[1] || (_cache[1] = $event => (_ctx.checkValidation())),
          onKeypress: _cache[2] || (_cache[2] = (...args) => (_ctx.isNumber && _ctx.isNumber(...args))),
          class: normalizeClass(`flex-grow bg-transparent placeholder-gray-600 focus input w-full focus:outline-none `)
        }, null, 40 /* PROPS, HYDRATE_EVENTS */, _hoisted_3), [
          [vModelDynamic, _ctx.content]
        ]),
        renderSlot(_ctx.$slots, "inner-suffix")
      ], 2 /* CLASS */),
      renderSlot(_ctx.$slots, "outer-suffix")
    ]),
    (!_ctx.validationStatus)
      ? (openBlock(), createElementBlock("div", _hoisted_4, [
          createVNode(_component_ts_normal_text, {
            customClass: 'pt-1 text-right',
            color: `text-errorColor`
          }, {
            default: withCtx(() => [
              createTextVNode(toDisplayString(_ctx.errorMessage), 1 /* TEXT */)
            ]),
            _: 1 /* STABLE */
          })
        ]))
      : createCommentVNode("v-if", true)
  ]))
}

script.render = render;
script.__file = "src/components/TsForm/textField.vue";

export { script as s };
