<script setup>
  import moment from "moment"
  import 'moment/dist/locale/pt-br'

  import imageNotAvailable from "@images/skeleton/no-image-available.png"
  import noImage from "@images/skeleton/no-image.jpg"
  import { computed } from "vue"

  const router = useRouter()
  const viewTickets = ref(false)
  const { width: windowWidth } = useWindowSize();

  const goBaixarTicket = (urlTicket) => {
    console.log(urlTicket)
    window.open(urlTicket, '_blank')
  }

  const isMobile = ref(false)
  isMobile.value = windowWidth.value < 768

  /* watch(windowWidth, () => {
    isMobile.value = windowWidth.value < 768
  }) */

  const props = defineProps({
    event: {
      type: Object,
      required: true
    },
    isMyTicketsPage: {
      type: Boolean,
      default: false
    },
    isHomePage: {
      type: Boolean,
      default: false
    }
  })

  const event = ref(null)

  watch(() => props.event, (newValue) => {
    console.log('Event:', newValue)
    event.value = newValue
  })

  if (props.event) {
    event.value = props.event
  }

  const leftDate = () => {
    const dateNow = moment()
    const dateEvent = moment(event.value.date + ' ' + event.value.hora)

    //Retornar "Faltam x dias" se a data do evento for maior que a data atual e se for hoje retornar é hoje
    if (dateEvent > dateNow) {
      const diffTime = Math.abs(moment(dateEvent).valueOf() - moment(dateNow).valueOf())
      const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))

      if (diffDays === 0) {
        return 'É hoje'
      }

      return `Faltam ${diffDays} dias`
    } else {
      return 'Evento já aconteceu'
    }
  }


  const goToDetailEvent = (uuid) => {
    router.push(`eventos/${uuid}`)
  }

  const viewMyTickets = () => {
    viewTickets.value = !viewTickets.value
  }

  const widthCard = computed(() => {
    return props.isMyTicketsPage ? '85%' : isMobile.value ? 180 : 300
  })

  const emit = defineEmits([
    'openHelp'
  ])
</script>

<template>
  <!--  <VChip color="primary" label style="font-size: 14px; width: fit-content !important;margin-top: -10px;"
        v-if="event.distance && isHomePage && leftDate() !== 'Evento já aconteceu'">
        {{ event.distance.replace(' ', '') }} de você
      </VChip> -->

  <VCard :class="`${!isHomePage ? '' : 'mb-2 pb-2'} ${isMobile && isMyTicketsPage ? 'mx-auto' : ''}`"
    :max-width="widthCard" :min-width="widthCard" style="border-radius: 7px;"
    @click="isMyTicketsPage ? '' : goToDetailEvent(event.slug, isMyTicketsPage || isHomePage)" v-if="event">
    <VImg class="align-end" :height="!isMobile ? 180 : 150" cover
      :src="(event.images && event.images.length > 0) ? event?.images[0]?.url : noImage">

      <VChip color="primary" class="mb-2 ml-2" label style="font-size: 14px; width: fit-content !important;"
        variant="flat" v-if="event.distance && !isHomePage && moment(event.date + ' ' + event.hora) > moment()">
        {{ event.distance.replace(' ', '') }} de você
      </VChip>

      <template #error>
        <VImg :src="imageNotAvailable" />
      </template>
    </VImg>

    <div class="mt-2 d-flex flex-column px-4">

      <VChip :color="moment(event.date + ' ' + event.hora) < moment() ? 'error' : 'primary'" class="mb-2" label
        style="font-size: 14px; width: fit-content !important;" v-if="isMyTicketsPage">
        {{ leftDate() }}
      </VChip>

      <VCardTitle :class="`pa-0 ${!isHomePage ? 'mb-0' : 'text-left'}`">
        <span style="font-size: 15px; text-transform: uppercase; font-weight: 600;">{{ event.title }}</span>
      </VCardTitle>

      <p class="d-flex mb-1 align-center" style="font-size: 13px;" v-if="event?.enderecoEvento">
        <VIcon icon="tabler-map-pin" size="13" class="mr-1" />
        {{ event?.enderecoEvento?.place && event?.enderecoEvento?.place != '' ?
          event?.enderecoEvento?.place : event?.enderecoEvento?.city + '/' + event?.enderecoEvento?.state }}
      </p>

      <p class="d-flex mb-3 text-primary flex-wrap" style="font-size: 13px;">
        <template v-if="!event?.dateAte && !event?.horaAte && event?.date && event?.hora">
          <span class="text-capitalize">{{ moment(event.date).format('dddd') }}</span>,
          {{ moment(event.date).format('DD') }} de
          <span class="text-capitalize">&nbsp;{{ moment(event.date).format('MMM') }}&nbsp;</span>
          às {{ event.hora }}
        </template>

        <template v-if="event?.dateAte && event?.horaAte">
          {{ moment(event.date).format('DD') }} de
          <span class="text-capitalize">&nbsp;{{ moment(event.date).format('MMM') }}&nbsp;</span>
          até
          {{ moment(event.dateAte).format('DD') }} de
          <span class="text-capitalize">&nbsp;{{ moment(event.dateAte).format('MMM') }}&nbsp;</span>
        </template>
      </p>
    </div>

    <div class="d-flex flex-column px-4 mb-3 mt-2" v-if="isMyTicketsPage">
      <VBtn class="mb-2" color="primary" variant="tonal" style="height: 50px;"
        @click="goToDetailEvent(event.slug, isMyTicketsPage || isHomePage)">
        Detalhes do evento
      </VBtn>

      <VBtn class="mb-3 mt-1" style="height: 50px;" color="primary" variant="outlined" @click="emit('openHelp', event)">
        <VIcon icon="tabler-help" class="mr-1" />
        <span class="text-none">Preciso de Ajuda</span>
      </VBtn>

      <VBtn color="primary" flat @click="viewMyTickets()" style="height: 50px; z-index: 2;">
        <VIcon :icon="viewTickets ? 'tabler-chevron-up' : 'tabler-ticket'" class="mr-2" /> {{ viewTickets ? 'Ocultar' :
          'Ver Ingressos' }}
      </VBtn>

      <v-expand-transition>

        <VList style="z-index: 1;" v-if="viewTickets && isMyTicketsPage">

          <VListItem v-for="(ticket, index) in event.comprasEvento" :key="ticket.id"
            @click="goBaixarTicket(ticket.urlTicket)" style="cursor: pointer;" class="pa-0 mt-2">

            <div class="d-flex flex-row ticket-div">

              <div class="col-1-ticket">
                <VIcon icon="tabler-download" size="20" color="primary" />
              </div>


              <div class="col-2-ticket">
                <VIcon icon="tabler-ticket" size="20" class="mr-1" />
                <strong>N° #{{ ticket.numberTicket }}</strong>
                <p class="mb-0"></p>
              </div>
            </div>
          </VListItem>

        </VList>

      </v-expand-transition>
    </div>

  </VCard>
</template>

<style scoped>
  .col-1-ticket {
    border-radius: 5px;
    padding: 20px;
    border-right: 2px dashed #fff;
    background-color: #eeeeee;
    position: relative;
    text-align: center;
    z-index: 9;
    transition: .3s;
  }

  .col-2-ticket {
    border-radius: 5px;
    border-left: 0;
    padding: 20px;
    background-color: #eeeeee;
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    transition: .3s;
  }

  .ticket-div:hover .col-1-ticket,
  .ticket-div:hover .col-2-ticket {
    background-color: #fde9d7;
    transition: .3s;
  }

  .text-limited {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    font-size: 0.95rem;
    line-height: 1rem;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    height: 3rem;
  }

  .text-limited-xxl {
    -webkit-line-clamp: 6;
    height: 6rem;

  }

  .text-limited-xl {
    -webkit-line-clamp: 5;
    height: 5rem;
  }

  .text-limited-md,
  .text-limited-lg {
    -webkit-line-clamp: 4;
    height: 4rem;
  }

  .text-limited-sm,
  .text-limited-xs {
    -webkit-line-clamp: 2;
    height: 2rem;
  }
</style>
