<template>
    <div class="flow-root">
        <div class="flex justify-between mb-2">
            <h2 class="text-lg font-medium text-gray-300">
                {{ $t("Register.wallet_activities") }}
            </h2>
            <!-- <p
                v-if="activities.length > 0"
                class="mt-2 text-xs font-medium text-gray-300"
            >
                {{
                    moment(String(activities[0].created_at)).format(
                        "MMM DD, YYYY"
                    )
                }}
            </p> -->
        </div>

        <hr class="mb-5" />

        <ul
            v-if="activities.length > 0"
            role="list"
            class="overflow-y-scroll max-h-80"
        >
            <li
                v-for="(activity, activityIdx) in activities"
                :key="activity.id"
            >
                <div class="relative flex pb-9">
                    <p class="text-[10px] text-gray-200">
                        {{
                            moment(String(activity.created_at)).format(
                                "MMM DD, YYYY HH:MM"
                            )
                        }}
                    </p>
                    <div
                        class="relative items-center justify-center ml-5 mr-4 text-center"
                        aria-hidden="true"
                    >
                        <div class="relative">
                            <svg
                                width="16"
                                height="17"
                                viewBox="0 0 16 17"
                                fill="none"
                                xmlns="http://www.w3.org/2000/svg"
                            >
                                <circle
                                    v-if="activity.status === 'reserved'"
                                    cx="8"
                                    cy="8.5"
                                    r="6.5"
                                    stroke="#009EF7"
                                    stroke-width="3"
                                />
                                <circle
                                    v-if="activity.status === 'paid'"
                                    cx="8"
                                    cy="8.5"
                                    r="6.5"
                                    stroke="#50CD89"
                                    stroke-width="3"
                                />
                                <circle
                                    v-if="activity.status === 'refunded'"
                                    cx="8"
                                    cy="8.5"
                                    r="6.5"
                                    stroke="#FA541C"
                                    stroke-width="3"
                                />
                            </svg>
                        </div>

                        <span
                            v-if="activityIdx !== activities.length - 1"
                            class="absolute h-7 w-0.5 bg-[#DADEE3] my-1"
                        />
                    </div>

                    <p class="text-xs font-medium text-gray-200">
                        {{
                            this.$i18n.locale == "en"
                                ? activity.activity_en
                                : activity.activity_ar
                        }}
                    </p>
                </div>
            </li>
        </ul>
        <div
            v-else
            class="mx-auto max-w-max min-h-[300px] flex items-center justify-center flex-col"
        >
            <svg
                width="166"
                height="150"
                viewBox="0 0 166 150"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
            >
                <path
                    opacity="0.2"
                    d="M4.23242 11.0342C4.23242 5.51134 8.70958 1.03418 14.2324 1.03418H130.709C136.232 1.03418 140.709 5.51133 140.709 11.0342V121.15C140.709 126.673 136.232 131.15 130.709 131.15H14.2324C8.70958 131.15 4.23242 126.673 4.23242 121.15V11.0342Z"
                    fill="#50CD89"
                />
                <path
                    d="M123.657 25V50.0403C123.657 51.7006 124.317 53.2929 125.491 54.4669C126.665 55.6408 128.257 56.3004 129.917 56.3004H154.958"
                    stroke="#50CD89"
                    stroke-width="10.5"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                />
                <path
                    d="M67.3164 87.6008V37.5202C67.3164 34.1996 68.6355 31.0151 70.9834 28.6671C73.3314 26.3191 76.516 25 79.8365 25H123.657L154.957 56.3004V125.161C154.957 128.482 153.638 131.666 151.29 134.014C148.942 136.362 145.758 137.681 142.437 137.681H108.007M48.5361 125.161H92.3567M92.3567 125.161L73.5764 106.381M92.3567 125.161L73.5764 143.941"
                    stroke="#50CD89"
                    stroke-width="10.5"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                />
            </svg>

            <h4
                class="mt-2 text-sm font-medium leading-4 text-center text-gray-200"
            >
                {{ $t("Register.wallet_no_activities") }}
            </h4>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        activities: {
            type: Array,
            required: true,
        },
    },
};
</script>
