<template>
  <div class="flex flex-col space-y-2 w-full">
    <div
      class="flex flex-row items-center space-x-2 justify-between"
      v-for="(user, index) in users"
      :key="index"
    >
      <div class="flex flex-row items-center space-x-2">
        <ts-avatar
          :bgColor="
            avatarColors[Math.floor(Math.random() * avatarColors.length)]
          "
          :customClass="'text-white'"
          :photoUrl="user.bio.photo?.link || ''"
          :size="'25'"
          >{{ user.bio.name.first.charAt(0) }}</ts-avatar
        >
        <div class="flex flex-row space-x-2 items-center">
          <ts-normal-text> {{ user.bio.name.full }} </ts-normal-text>
          <template v-if="!hasRemove">
            <span
              :class="`h-[4px] w-[4px] ${
                paidUsers?.includes(user.id)
                  ? 'bg-primaryGreen'
                  : 'bg-errorColor'
              }  rounded-full`"
            ></span>
            <ts-normal-text
              :color="`${
                paidUsers?.includes(user.id)
                  ? 'text-primaryGreen'
                  : 'text-errorColor'
              }`"
            >
              {{ paidUsers?.includes(user.id) ? "Paid" : "Unpaid" }}
            </ts-normal-text>
            <template v-if="!paidUsers?.includes(user.id)">
              <span
                :class="`h-[4px] w-[4px] bg-paragraphTextLight rounded-full`"
              ></span>
              <ts-normal-text :color="'text-primaryPurple'">
                Pay
              </ts-normal-text>
            </template>
          </template>
        </div>
      </div>
      <ts-icon name="remove" v-if="hasRemove" :customClass="'h-[15px]'" />
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import TsIcon from "../TsIcon/index.vue";
import TsAvatar from "../TsAvatar/index.vue";
import TsNormalText from "../TsTypography/normalText.vue";
import { SingleUser } from "tutorstack-frontend-logic";

export default defineComponent({
  components: {
    TsIcon,
    TsAvatar,
    TsNormalText,
  },
  props: {
    users: {
      type: Object as () => SingleUser[],
      required: true,
    },
    paidUsers: {
      type: [],
      required: false,
    },
    hasRemove: {
      type: Boolean,
      default: false,
    },
  },
  name: "TsUsersList",
  setup() {
    const avatarColors = [
      "bg-primaryPurple",
      "bg-primaryGreen",
      "bg-primaryOrange",
      "bg-primaryBlue",
    ];

    return {
      avatarColors,
    };
  },
});
</script>
