import { defineComponent, ref, watch, onMounted, resolveComponent, openBlock, createElementBlock, createElementVNode, renderSlot, Fragment, createVNode, withCtx, createTextVNode, toDisplayString, renderList } from 'vue';
import { s as script$1 } from './normalText-66005fcf.mjs';
import script$2 from './TsIcon.mjs';

var script = defineComponent({
    components: {
        TsNormalText: script$1,
        TsIcon: script$2,
    },
    props: {
        placeholder: {
            type: String,
            default: "Upload File",
        },
        iconName: {
            type: String,
            default: "upload",
        },
        accept: {
            type: String,
            default: "*",
        },
        modelValue: {
            required: false,
        },
        isWrapper: {
            type: Boolean,
            default: false,
        },
        isMultiple: {
            type: Boolean,
            default: false,
        },
    },
    emits: ["update:modelValue", "update:localFileUrl"],
    name: "TsFileAttachment",
    setup(props, context) {
        const files = ref();
        const fileListArray = ref([]);
        const uploadHandler = (e) => {
            const input = e.target;
            if (props.isMultiple) {
                files.value = input.files;
            }
            else {
                files.value = input.files;
                // create readable url
                const fr = new FileReader();
                if (files.value) {
                    fr.readAsDataURL(files.value[0]);
                    fr.addEventListener("load", () => {
                        context.emit("update:localFileUrl", fr.result?.toString() ? fr.result?.toString() : "");
                    });
                }
            }
        };
        watch(files, () => {
            if (files.value) {
                fileListArray.value = [];
                for (let index = 0; index < files.value.length; index++) {
                    const file = files.value?.item(index);
                    fileListArray.value.push(file);
                }
                context.emit("update:modelValue", props.isMultiple ? fileListArray.value : fileListArray.value[0]);
            }
        });
        onMounted(() => {
            if (props.modelValue) {
                fileListArray.value = props.modelValue;
            }
        });
        const removeFile = (index) => {
            fileListArray.value = fileListArray.value.filter((file, fileIndex) => {
                return fileIndex != index;
            });
            context.emit("update:modelValue", props.isMultiple ? fileListArray.value : fileListArray.value[0]);
        };
        return {
            uploadHandler,
            fileListArray,
            removeFile,
        };
    },
});

const _hoisted_1 = { class: "flex w-full flex-col space-y-2" };
const _hoisted_2 = {
  key: 0,
  class: "flex flex-row relative"
};
const _hoisted_3 = ["accept", "multiple"];
const _hoisted_4 = { class: "rounded flex flex-row items-center justify-center relative space-x-2 py-3 border-[1px] border-gray-400 border-dashed" };
const _hoisted_5 = ["accept", "multiple"];
const _hoisted_6 = { class: "w-full grid grid-cols-3 gap-3" };
const _hoisted_7 = { class: "flex flex-row space-x-2 items-center w-full" };

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

  return (openBlock(), createElementBlock("div", _hoisted_1, [
    (_ctx.isWrapper)
      ? (openBlock(), createElementBlock("div", _hoisted_2, [
          createElementVNode("input", {
            type: "file",
            style: {"opacity":"0","width":"100%","height":"100%","left":"0","overflow":"hidden","position":"absolute","z-index":"10"},
            accept: _ctx.accept,
            multiple: _ctx.isMultiple,
            onChange: _cache[0] || (_cache[0] = (...args) => (_ctx.uploadHandler && _ctx.uploadHandler(...args)))
          }, null, 40 /* PROPS, HYDRATE_EVENTS */, _hoisted_3),
          renderSlot(_ctx.$slots, "content")
        ]))
      : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
          createVNode(_component_ts_normal_text, null, {
            default: withCtx(() => [
              renderSlot(_ctx.$slots, "title")
            ]),
            _: 3 /* FORWARDED */
          }),
          createElementVNode("div", _hoisted_4, [
            createElementVNode("input", {
              type: "file",
              style: {"opacity":"0","width":"100%","height":"100%","left":"0","overflow":"hidden","position":"absolute","z-index":"10"},
              accept: _ctx.accept,
              multiple: _ctx.isMultiple,
              onChange: _cache[1] || (_cache[1] = (...args) => (_ctx.uploadHandler && _ctx.uploadHandler(...args)))
            }, null, 40 /* PROPS, HYDRATE_EVENTS */, _hoisted_5),
            createVNode(_component_ts_icon, {
              name: `${_ctx.iconName}`,
              customClass: 'h-[13px]'
            }, null, 8 /* PROPS */, ["name"]),
            createVNode(_component_ts_normal_text, { color: "text-paragraphTextLight" }, {
              default: withCtx(() => [
                createTextVNode(toDisplayString(_ctx.placeholder), 1 /* TEXT */)
              ]),
              _: 1 /* STABLE */
            })
          ]),
          createElementVNode("div", _hoisted_6, [
            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.fileListArray, (file, index) => {
              return (openBlock(), createElementBlock("div", {
                key: index,
                class: "mdlg:col-span-1 col-span-3 flex py-2 space-x-2 flex-row items-center justify-between"
              }, [
                createElementVNode("div", _hoisted_7, [
                  createVNode(_component_ts_icon, {
                    name: "file",
                    customClass: 'h-[17px]'
                  }),
                  createVNode(_component_ts_normal_text, { customClass: 'line-clamp-1' }, {
                    default: withCtx(() => [
                      createTextVNode(toDisplayString(file.name), 1 /* TEXT */)
                    ]),
                    _: 2 /* DYNAMIC */
                  }, 1024 /* DYNAMIC_SLOTS */)
                ]),
                createVNode(_component_ts_icon, {
                  name: 'close',
                  customClass: 'h-[14px] cursor-pointer',
                  onClick: $event => (_ctx.removeFile(index))
                }, null, 8 /* PROPS */, ["onClick"])
              ]))
            }), 128 /* KEYED_FRAGMENT */))
          ])
        ], 64 /* STABLE_FRAGMENT */))
  ]))
}

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

export { script as s };
