Vue.component('event-ticket-items', {
  props: { 
    tickets: {
      type: Array,
    },
    settings: {
      type: Object
    },
    end_at: {
      type: String,
    },
    submitted: {
      type: Boolean
    }
  },
  inject: ['_f','_get'],
  data: ()=>({
  }),
  computed: {
  },
  mounted () {
  },
  methods: {
    checkTicketStatus(ticket) {
      var ticket_start_sold_at = (ticket.active_start_at && new Date(ticket.active_start_at));
      var event_end_at = (this.end_at && new Date(this.end_at));
      var ticket_end_sold_at = (ticket.active_end_at && new Date(ticket.active_end_at));
      ticket_end_sold_at = ticket_end_sold_at || event_end_at;
      if (event_end_at && (ticket_end_sold_at > event_end_at)) {
        ticket_end_sold_at = event_end_at;
      }
      if (ticket_start_sold_at >= new Date()) {
        // non started selling
        return "await";
      } else if(ticket_end_sold_at <= new Date()) {
        // ended selling
        return "expired";
      } else if ((ticket.sold+ticket.hold) >= ticket.quantity) {
        // sold out
        return 'soldOut';
      } else {
        // available
        return 'available';
      }
    },
  },
  template:
`<div>
  <v-alert
    outlined
    border="left"
    color="primary"
    dense
    class="px-3 mb-2"
    :value="true"
    v-for="(ticket, index) in tickets"
    :key="index"
  >
    <v-row dense class="black--text subtitle-2">
      <v-col>
        <div>{{_f(ticket.fields, 'title')}}</div>
        <div class='grey--text lighten-1'>{{_f(ticket.fields, 'remark')}}</div>

        <div v-if="ticket.price > 0">
          <span class="subheading">{{ ticket.currency + '' + ticket.price }}</span>
          <span class='grey--text lighten-1' v-if="ticket.user_fee > 0">(+{{ticket.currency + ticket.user_fee}} {{$t('ticket.serviceFee')}})</span>
        </div>
        <h5 v-else-if="!~~(settings.hide_free_ticket_price)">{{$t('eventPayment.free')}}</h5>
      </v-col>
      <v-col cols="auto">
        <v-text-field
          v-if="checkTicketStatus(ticket) === 'available' && ticket.type === 'print'"
          v-model.number="ticket.purchase_quantity"
          :rules="[
            v=>(!v || v>=0) || $t('validation.min_value',{field:$t('event.ticketQuantity'),min:0}),
            v=>(!v || v<=ticket.remainder) || $t('validation.max_value',{field:$t('event.ticketQuantity'),max:ticket.remainder}),
          ]"
          :hide-details="submitted?'auto':true"
          :max="ticket.remainder"
          min="0"
          class="append-no-padding prepend-height"
          type="number"
          single-line
          outline
        >
        </v-text-field>
        <v-select
          v-else-if="checkTicketStatus(ticket) == 'available'" 
          :items="Array.from(Array(Math.min(ticket.purchase_limit, ticket.remainder)+1).keys()).map(v=>({text: v}))" 
          v-model="ticket.purchase_quantity" 
          :placeholder="$t('event.ticketQuantity')"
          class="hide-input x-dense text-center"
          style="min-width: 60px;"
          :class="{'caption':ticket.purchase_quantity==null}"
          :rules="[
            v=>(!v || v>=0) || $t('validation.min_value',{field:$t('event.ticketQuantity'),min:0}),
            v=>(!v || v<=ticket.remainder) || $t('validation.max_value',{field:$t('event.ticketQuantity'),max:ticket.remainder}),
          ]"
          :hide-details="submitted?'auto':true"
          single-line 
          outlined
        ></v-select>
        <label v-else-if="checkTicketStatus(ticket) === 'expired'">
          <span v-if="ticket.price > 0">
            {{$t('ticketStatus.ended')}}
          </span>
          <span v-else>
            {{$t('ticketStatus.ended_free')}}
          </span>
        </label>
        <label v-else-if="checkTicketStatus(ticket) === 'await'">
          <span v-if="ticket.price > 0">
            {{$t('ticketStatus.coming', { date: ticket.active_start_date.substr(5) })}}
          </span>
          <span v-else>
            {{$t('ticketStatus.coming_free', { date: ticket.active_start_date.substr(5) })}}
          </span>
        </label>
        <label v-else-if="checkTicketStatus(ticket) === 'soldOut'">
          <span v-if="ticket.price > 0">
            {{$t('ticketStatus.soldOut')}}
          </span>
          <span v-else>
            {{$t('ticketStatus.soldOut_free')}}
          </span>
        </label>
        <label v-else>
          --
        </label>
      </v-col>
    </v-row>
  </v-alert>
</div>`
});