<template>
  <div
    class="!z-5 relative flex rounded-[20px] max-w-200px bg-clip-border simple-shadow w-full !p-4 3xl:p-![18px] mr-1 mb-2 px product-cart-item"
  >
    <div class="h-full w-full">
      <div class="relative w-full">
        <span class="text-white mb-5">
          Sany: <span class="font-bold">{{ product.quantity }}</span>
        </span>
        <img
          :src="product.product_thumbnail"
          class="mb-3 mt-5 h-full w-full rounded max-w-200px max-h-200px"
        />
        <button
          type="button"
          class="absolute top-0 right-0 flex items-center justify-center rounded-full bg-white p-2 text-brand-500 hover:cursor-pointer"
        >
          <div
            class="flex h-full w-full items-center justify-center rounded-full text-xl hover:bg-gray-50"
          >
            <input
              type="checkbox"
              class="checkbox scale-2"
              @change="handleChange($event)"
              :checked="isChecked"
            />
          </div>
        </button>
      </div>
      <div class="mb-3 px-1">
        <div class="mb-2">
          <p class="text-lg font-bold text-white">
            {{ product.product_name }}
          </p>
          <ul class="mt-1 text-sm font-medium text-white">
            <li>
              Sargyt ID:
              <span class="font-bold">{{ product.order_id }}</span>,
            </li>
            <li>
              Haryt ID:
              <span class="font-bold">{{ product.product_id }}</span>
            </li>
            <li>
              Satylan baha:
              <div v-if="editMode">
                <input
                  class="text-black"
                  type="text"
                  v-model="unit_price_amount"
                  @input="fireProductPriceChangeEvent()"
                >
              </div>
              <div v-else>
                <span class="font-bold">
                  {{ product.unit_price_amount}}
                </span>
              </div>
            </li>
            <li>
              Haryt oz bahasy:
              <div v-if="editMode">
                <input
                  class="text-black"
                  type="text"
                  v-model="cost_amount"
                  @input="fireProductPriceChangeEvent()"
                >
              </div>
              <div v-else>
                <span class="font-bold">
                  {{ product.unit_cost_amount }}
                </span>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    product: {
      type: Object,
      required: true,
    },
    editMode: {
      type: Boolean,
      required: false,
      default: true,
    },
  },
  data() {
    return {
        isChecked: true,
        unit_price_amount: this.product.unit_price_amount,
        cost_amount: this.product.product_cost_amount,
    };
  },
  inject: ['sharedState'],
  methods: {
    getProductItem() {
        return {
            product_id: this.product.product_id,
            order_item_id: this.product.id,
            unit_price_amount: this.unit_price_amount,
            cost_amount: this.cost_amount,
            quantity: this.product.quantity,
        };
    },

    handleChange(event) {
      const index = this.sharedState.values;

      if (event.target.checked) {
        Nova.$emit('add_to_values', this.getProductItem())
      } else {
        Nova.$emit('remove_from_values', this.getProductItem())
      }

      this.sharedState.calculateMoney()
    },

    fireProductPriceChangeEvent() {
      const productIndex = this.sharedState.prices.findIndex(
        price => price.order_item_id === this.product.id
      );
      const product = this.getProductItem();

      if (productIndex === -1) {
        this.sharedState.prices.push(product);
      } else {
        this.sharedState.prices[productIndex] = product;
      }

      this.sharedState.resetMoney();
      this.sharedState.calculateMoney();
    },
  },
  mounted() {
    this.fireProductPriceChangeEvent();
  },
};
</script>
<style>
.product-cart-item {
    padding: 15px 15px 0 15px;
}
.max-w-200px {
    max-width: 200px;
}
.max-h-200px {
    max-height: 200px;
}
.scale-2 {
    transform: scale(2);
}
.simple-shadow {
    box-shadow: 0px 0px 2px 0px white;
}
.mb-2 {
    margin-bottom: 8px;
}
.mt-5 {
    margin-top: 15px;
}
</style>
