'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var headerText = require('./headerText-2eeecf55.js');
var normalText = require('./normalText-7b937f11.js');
var TsAvatar = require('./TsAvatar.js');
var textField = require('./textField-b43babf6.js');
var TsButton = require('./TsButton.js');
var TsIcon = require('./TsIcon.js');
require('./TsImageLoader.js');

var script = vue.defineComponent({
    components: {
        TsHeaderText: headerText.script,
        TsNormalText: normalText.script,
        TsAvatar: TsAvatar["default"],
        TsTextField: textField.script,
        TsButton: TsButton["default"],
        TsIcon: TsIcon["default"],
    },
    props: {
        customClass: {
            type: String,
            default: "",
        },
        data: {
            type: Array,
            required: true,
        },
    },
    name: "TsDiscussion",
});

const _hoisted_1 = { class: "flex flex-col items-start space-y-2 border-[1px] border-gray-200 rounded px-3 py-3 mdlg:!px-5 mdlg:!py-5" };
const _hoisted_2 = /*#__PURE__*/vue.createTextVNode(" Discussion ");
const _hoisted_3 = { class: "flex flex-col space-y-[1px] flex-grow" };
const _hoisted_4 = { class: "w-full flex flex-row space-x-2 pt-2 items-center justify-between" };

function render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_ts_header_text = vue.resolveComponent("ts-header-text");
  const _component_ts_avatar = vue.resolveComponent("ts-avatar");
  const _component_ts_normal_text = vue.resolveComponent("ts-normal-text");
  const _component_ts_text_field = vue.resolveComponent("ts-text-field");
  const _component_ts_icon = vue.resolveComponent("ts-icon");
  const _component_ts_button = vue.resolveComponent("ts-button");

  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
    vue.createVNode(_component_ts_header_text, { customClass: 'pb-2' }, {
      default: vue.withCtx(() => [
        _hoisted_2
      ]),
      _: 1 /* STABLE */
    }),
    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.data, (message, index) => {
      return (vue.openBlock(), vue.createElementBlock("div", {
        class: "w-full flex flex-row space-x-2 items-start",
        key: index
      }, [
        vue.createVNode(_component_ts_avatar, {
          photoUrl: message.photoUrl,
          size: '32',
          bgColor: 'bg-primaryPurple',
          customClass: 'text-white min-w-[32.5px]'
        }, {
          default: vue.withCtx(() => [
            vue.createTextVNode(vue.toDisplayString(message.photoUrl ? "" : message.username.charAt(0)), 1 /* TEXT */)
          ]),
          _: 2 /* DYNAMIC */
        }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["photoUrl", "customClass"]),
        vue.createElementVNode("div", _hoisted_3, [
          vue.createVNode(_component_ts_header_text, {
            size: "xs",
            customClass: 'text-left'
          }, {
            default: vue.withCtx(() => [
              vue.createTextVNode(vue.toDisplayString(message.username), 1 /* TEXT */)
            ]),
            _: 2 /* DYNAMIC */
          }, 1024 /* DYNAMIC_SLOTS */),
          vue.createVNode(_component_ts_normal_text, { customClass: ' text-left' }, {
            default: vue.withCtx(() => [
              vue.createTextVNode(vue.toDisplayString(message.content), 1 /* TEXT */)
            ]),
            _: 2 /* DYNAMIC */
          }, 1024 /* DYNAMIC_SLOTS */)
        ])
      ]))
    }), 128 /* KEYED_FRAGMENT */)),
    vue.createElementVNode("div", _hoisted_4, [
      vue.createVNode(_component_ts_text_field, {
        placeholder: 'Write a message',
        customClass: 'border-[1px] w-full'
      }),
      vue.createVNode(_component_ts_button, { padding: 'px-4 py-3' }, {
        default: vue.withCtx(() => [
          vue.createVNode(_component_ts_icon, {
            name: 'send',
            customClass: 'h-[20px]'
          })
        ]),
        _: 1 /* STABLE */
      })
    ])
  ]))
}

script.render = render;
script.__file = "src/components/TsDiscussion/index.vue";

exports["default"] = script;
