'use strict';

var vue = require('vue');
var normalText = require('./normalText-7b937f11.js');
var TsIcon = require('./TsIcon.js');

var script = vue.defineComponent({
    components: {
        TsNormalText: normalText.script,
        TsIcon: TsIcon["default"],
    },
    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 = vue.ref();
        const fileListArray = vue.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() : "");
                    });
                }
            }
        };
        vue.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]);
            }
        });
        vue.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 = vue.resolveComponent("ts-normal-text");
  const _component_ts_icon = vue.resolveComponent("ts-icon");

  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
    (_ctx.isWrapper)
      ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
          vue.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),
          vue.renderSlot(_ctx.$slots, "content")
        ]))
      : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
          vue.createVNode(_component_ts_normal_text, null, {
            default: vue.withCtx(() => [
              vue.renderSlot(_ctx.$slots, "title")
            ]),
            _: 3 /* FORWARDED */
          }),
          vue.createElementVNode("div", _hoisted_4, [
            vue.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),
            vue.createVNode(_component_ts_icon, {
              name: `${_ctx.iconName}`,
              customClass: 'h-[13px]'
            }, null, 8 /* PROPS */, ["name"]),
            vue.createVNode(_component_ts_normal_text, { color: "text-paragraphTextLight" }, {
              default: vue.withCtx(() => [
                vue.createTextVNode(vue.toDisplayString(_ctx.placeholder), 1 /* TEXT */)
              ]),
              _: 1 /* STABLE */
            })
          ]),
          vue.createElementVNode("div", _hoisted_6, [
            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.fileListArray, (file, index) => {
              return (vue.openBlock(), vue.createElementBlock("div", {
                key: index,
                class: "mdlg:col-span-1 col-span-3 flex py-2 space-x-2 flex-row items-center justify-between"
              }, [
                vue.createElementVNode("div", _hoisted_7, [
                  vue.createVNode(_component_ts_icon, {
                    name: "file",
                    customClass: 'h-[17px]'
                  }),
                  vue.createVNode(_component_ts_normal_text, { customClass: 'line-clamp-1' }, {
                    default: vue.withCtx(() => [
                      vue.createTextVNode(vue.toDisplayString(file.name), 1 /* TEXT */)
                    ]),
                    _: 2 /* DYNAMIC */
                  }, 1024 /* DYNAMIC_SLOTS */)
                ]),
                vue.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";

exports.script = script;
