'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: "*",
        },
        isWrapper: {
            type: Boolean,
            default: false,
        },
        isMultiple: {
            type: Boolean,
            default: false,
        },
    },
    emits: ["update:modelValue", "update:localFileUrl"],
    name: "TsFileAttachment",
    setup(props, context) {
        const uploadHandler = (e) => {
            const input = e.target;
            if (props.isMultiple) {
                const files = input.files;
                context.emit("update:modelValue", files);
            }
            else {
                const file = input.files[0];
                context.emit("update:modelValue", file);
                // create readable url
                const fr = new FileReader();
                fr.readAsDataURL(file);
                fr.addEventListener("load", () => {
                    context.emit("update:localFileUrl", fr.result?.toString() ? fr.result?.toString() : "");
                });
            }
            input.value = "";
        };
        return {
            uploadHandler,
        };
    },
});

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"];

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 */
            })
          ])
        ], 64 /* STABLE_FRAGMENT */))
  ]))
}

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

exports.script = script;
