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

    <div class="scroll-track">
      <q-card
        v-for="item in data"
        :key="item.id"
        :flat="false"
        class="mini-card shadow-card bg-surface card-border"
      >
        <q-card-section class="column q-pa-md q-gutter-y-xs text-text">
          <q-avatar
            class="q-mx-auto"
            size="56px"
            :style="avatarColors[item.provider_id % avatarColors.length]"
          >
            <img
              v-if="item.provider_photo"
              :src="item.provider_photo"
              style="object-fit: cover; border-radius: 50%"
            />

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

          <span class="text-done-name font12 fontmedium">
            {{ getFirstName(item.provider_name) || "Prestador" }}
          </span>

          <span class="text-done-district font9 fontbold text-grey-7">
            {{
              item.provider_district != null
                ? item.provider_district
                : $t("dashboard_client.last_schedules.no_address")
            }}
          </span>

          <q-btn
            class="q-mt-xs full-width"
            color="secondary"
            padding="1px 5px"
            rounded
            size="sm"
            :label="$t('dashboard_client.last_schedules.reschedule')"
            @click="goToScheduling(item)"
          />
        </q-card-section>
      </q-card>
    </div>
  </div>
</template>

<script setup>
import { avatarColors } from "src/helpers/avatarColors";
import { getFirstName } from "src/helpers/utils";
import { useQuasar } from "quasar";

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

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

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: 10px;
  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;
  }
}
.mini-card {
  flex: 0 0 130px;
  scroll-snap-align: start;
}
.text-done-district {
  text-align: center;
}
</style>
