<template>
  <div class="q-mx-md q-mb-md">
    <div
      class="dashboard-section-title gradient-diarista q-mb-sm font16 fontbold"
    >
      {{ $t("dashboard_client.favorites.title") }}
    </div>

    <div class="scroll-track">
      <q-card
        v-for="item in data"
        :key="item.provider_id"
        :flat="false"
        class="fav-card shadow-card bg-surface card-border"
      >
        <q-card-section class="q-pa-sm column text-text">
          <div class="row items-start no-wrap">
            <div class="col-3 q-my-auto">
              <q-avatar
                class=""
                size="46px"
                :style="avatarColors[item.provider_id % avatarColors.length]"
              >
                <img
                  v-if="getProfileMediaUrl(item)"
                  class="profile-image"
                  :src="getProfileMediaUrl(item)"
                />

                <span v-else>
                  {{ item.provider_name?.slice(0, 1).toUpperCase() ?? "—" }}
                </span>
              </q-avatar>
            </div>

            <div class="col-5 column q-gutter-y-xs q-my-auto">
              <span class="text-fav-name font12 fontmedium">
                {{ getFirstName(item.provider_name) || "Prestador" }}
              </span>

              <span
                v-if="getProviderGenderLabel(item, t)"
                class="font9 fontmedium text-grey-7"
              >
                {{ getProviderGenderLabel(item, t) }}
              </span>

              <span class="text-fav-region font9 fontbold text-grey-7">
                {{
                  item.provider_district ??
                  $t("dashboard_client.last_schedules.no_address")
                }}
              </span>

              <div
                v-if="item.average_rating != null"
                class="row items-center q-gutter-x-xs"
              >
                <q-icon
                  color="warning"
                  name="mdi-star"
                  size="xs"
                />

                <span class="text-fav-name font12 fontregular">
                  {{ Number(item.average_rating).toFixed(1) }}
                </span>
              </div>
            </div>

            <div class="col-4 column q-mt-auto">
              <q-btn
                color="primary"
                padding="1px 5px"
                rounded
                size="sm"
                :label="$t('dashboard_client.favorites.view_schedule')"
                @click="goToScheduling(item)"
              />
            </div>
          </div>
        </q-card-section>
      </q-card>
    </div>
  </div>
</template>

<script setup>
import { avatarColors } from "src/helpers/avatarColors";
import { getFirstName } from "src/helpers/utils";
import { getProfileMediaUrl } from "src/helpers/profileMedia";
import { getProviderGenderLabel } from "src/helpers/provider";
import { useI18n } from "vue-i18n";
import { useQuasar } from "quasar";

import SchedulingDialog from "src/pages/search/components/SchedulingDialog.vue";

defineProps({ data: { default: () => [], type: Array } });

const { t } = useI18n();

const $q = useQuasar();

const goToScheduling = (provider) => {
  $q.dialog({
    component: SchedulingDialog,
    componentProps: { provider },
  });
};
</script>

<style scoped lang="scss">
.scroll-track {
  display: flex;
  flex-direction: row;
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding-bottom: 8px;

  &::-webkit-scrollbar {
    display: none;
  }

  &::after {
    content: "";
    flex: 0 0 1px;
  }
}

.fav-card {
  flex: 0 0 200px;
  scroll-snap-align: start;
  min-width: 70%;
}

.profile-image {
  height: 100%;
  object-fit: cover;
  width: 100%;
}
</style>
