import { defineComponent, ref, onMounted, resolveComponent, openBlock, createElementBlock, Fragment, renderList, createElementVNode, createVNode, withCtx, createTextVNode, toDisplayString, normalizeClass, createBlock, withModifiers, createCommentVNode } from 'vue';
import script$1 from './TsIcon.mjs';
import script$2 from './TsAvatar.mjs';
import { s as script$3 } from './normalText-66005fcf.mjs';
import './TsImageLoader.mjs';

var script = defineComponent({
    components: {
        TsIcon: script$1,
        TsAvatar: script$2,
        TsNormalText: script$3,
    },
    props: {
        users: {
            type: Object,
            required: true,
        },
        paidUsers: {
            type: [],
            required: false,
        },
        hasRemove: {
            type: Boolean,
            default: false,
        },
        isCheckbox: {
            type: Boolean,
            default: false,
        },
        modelValue: {
            required: false,
        },
        payForSession: {
            type: Function,
            required: false,
        },
        currentUserId: {
            type: String,
            required: false,
        },
        sessionState: {
            type: String,
            default: "",
        },
    },
    emits: ["update:modelValue"],
    name: "TsUsersList",
    setup(props, context) {
        const avatarColors = [
            "bg-primaryPurple",
            "bg-primaryGreen",
            "bg-primaryOrange",
            "bg-primaryBlue",
        ];
        const selectedUsers = ref([]);
        const selectOption = (key) => {
            if (selectedUsers.value.includes(key)) {
                selectedUsers.value = selectedUsers.value.filter((eachKey) => eachKey != key);
            }
            else {
                selectedUsers.value.push(key);
            }
            context.emit("update:modelValue", selectedUsers.value);
        };
        onMounted(() => {
            if (props.modelValue) {
                selectedUsers.value = props.modelValue;
            }
        });
        return {
            avatarColors,
            selectedUsers,
            selectOption,
        };
    },
});

const _hoisted_1 = { class: "flex flex-col space-y-2 w-full" };
const _hoisted_2 = ["onClick"];
const _hoisted_3 = { class: "flex flex-row space-x-2 items-center" };
const _hoisted_4 = /*#__PURE__*/createElementVNode("span", {
  class: /*#__PURE__*/normalizeClass(`h-[4px] w-[4px] bg-paragraphTextLight rounded-full`)
}, null, -1 /* HOISTED */);
const _hoisted_5 = /*#__PURE__*/createTextVNode(" Pay ");

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

  return (openBlock(), createElementBlock("div", _hoisted_1, [
    (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.users, (user, index) => {
      return (openBlock(), createElementBlock("div", {
        class: "flex flex-row items-center space-x-2 justify-between",
        key: index
      }, [
        createElementVNode("div", {
          class: "flex flex-row items-center space-x-2 cursor-pointer",
          onClick: $event => (_ctx.selectOption(user.id))
        }, [
          createVNode(_component_ts_avatar, {
            bgColor: 
            _ctx.avatarColors[Math.floor(Math.random() * _ctx.avatarColors.length)]
          ,
            customClass: 'text-white',
            photoUrl: user.bio.photo?.link || '',
            size: '25'
          }, {
            default: withCtx(() => [
              createTextVNode(toDisplayString(user.bio.name.first.charAt(0)), 1 /* TEXT */)
            ]),
            _: 2 /* DYNAMIC */
          }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["bgColor", "photoUrl"]),
          createElementVNode("div", _hoisted_3, [
            createVNode(_component_ts_normal_text, null, {
              default: withCtx(() => [
                createTextVNode(toDisplayString(_ctx.currentUserId == user.id ? "You" : user.bio.name.full), 1 /* TEXT */)
              ]),
              _: 2 /* DYNAMIC */
            }, 1024 /* DYNAMIC_SLOTS */),
            (!_ctx.hasRemove && !_ctx.isCheckbox && _ctx.sessionState != 'previous')
              ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
                  createElementVNode("span", {
                    class: normalizeClass(`h-[4px] w-[4px] ${
                _ctx.paidUsers?.includes(user.id)
                  ? 'bg-primaryGreen'
                  : 'bg-errorColor'
              }  rounded-full`)
                  }, null, 2 /* CLASS */),
                  createVNode(_component_ts_normal_text, {
                    color: `${
                _ctx.paidUsers?.includes(user.id)
                  ? 'text-primaryGreen'
                  : 'text-errorColor'
              }`
                  }, {
                    default: withCtx(() => [
                      createTextVNode(toDisplayString(_ctx.paidUsers?.includes(user.id) ? "Paid" : "Unpaid"), 1 /* TEXT */)
                    ]),
                    _: 2 /* DYNAMIC */
                  }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["color"]),
                  (!_ctx.paidUsers?.includes(user.id))
                    ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
                        _hoisted_4,
                        (_ctx.payForSession)
                          ? (openBlock(), createBlock(_component_ts_normal_text, {
                              key: 0,
                              color: 'text-primaryPurple',
                              onClick: withModifiers($event => (_ctx.payForSession(user.id)), ["stop"])
                            }, {
                              default: withCtx(() => [
                                _hoisted_5
                              ]),
                              _: 2 /* DYNAMIC */
                            }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["onClick"]))
                          : createCommentVNode("v-if", true)
                      ], 64 /* STABLE_FRAGMENT */))
                    : createCommentVNode("v-if", true)
                ], 64 /* STABLE_FRAGMENT */))
              : createCommentVNode("v-if", true)
          ])
        ], 8 /* PROPS */, _hoisted_2),
        (_ctx.hasRemove)
          ? (openBlock(), createBlock(_component_ts_icon, {
              key: 0,
              name: "remove",
              customClass: 'h-[15px]'
            }))
          : createCommentVNode("v-if", true),
        (_ctx.isCheckbox)
          ? (openBlock(), createBlock(_component_ts_icon, {
              key: 1,
              name: `${
          _ctx.selectedUsers.includes(user.id) ? 'checkbox-active' : 'checkbox'
        }`,
              customClass: `h-[15px]`,
              onClick: $event => (_ctx.selectOption(user.id))
            }, null, 8 /* PROPS */, ["name", "onClick"]))
          : createCommentVNode("v-if", true)
      ]))
    }), 128 /* KEYED_FRAGMENT */))
  ]))
}

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

export { script as default };
