<script setup lang="ts">
import { GenericDocForAccompanyingPeriod } from "ChillDocStoreAssets/types/generic_doc";
import GenericDocItemBox from "ChillMainAssets/vuejs/WorkflowAttachment/Component/GenericDocItemBox.vue";
import DocumentActionButtonsGroup from "ChillDocStoreAssets/vuejs/DocumentActionButtonsGroup.vue";

interface PickGenericDocItemProps {
  genericDoc: GenericDocForAccompanyingPeriod;
  accompanyingPeriodId: number;
  isPicked: boolean;
}

const props = defineProps<PickGenericDocItemProps>();
const emit = defineEmits<{
  (
    e: "pickGenericDoc",
    payload: { genericDoc: GenericDocForAccompanyingPeriod },
  ): void;

  (
    e: "removeGenericDoc",
    payload: { genericDoc: GenericDocForAccompanyingPeriod },
  ): void;
}>();

const clickOnAddButton = () => {
  emit("pickGenericDoc", { genericDoc: props.genericDoc });
};
</script>

<template>
  <div class="item-bloc" :class="{ isPicked: isPicked }">
    <generic-doc-item-box
      :generic-doc="props.genericDoc"
    ></generic-doc-item-box>

    <div class="item-row separator">
      <ul class="record_actions">
        <li v-if="props.genericDoc.storedObject !== null">
          <document-action-buttons-group
            :stored-object="props.genericDoc.storedObject"
          ></document-action-buttons-group>
        </li>
        <li>
          <button
            v-if="!isPicked"
            type="button"
            class="btn btn-chill-green text-white"
            @click="clickOnAddButton"
          >
            <i class="bi bi-cart-plus"></i>
          </button>
          <button
            v-else
            type="button"
            class="btn btn-chill-red text-white"
            @click="
              emit('removeGenericDoc', {
                genericDoc: props.genericDoc,
              })
            "
          >
            <i class="bi bi-cart-dash"></i>
          </button>
        </li>
      </ul>
    </div>
  </div>
</template>

<style scoped lang="scss">
.item-bloc {
  &.isPicked {
    background:
      linear-gradient(
        180deg,
        rgba(25, 135, 84, 1) 0px,
        rgba(25, 135, 84, 0) 9px
      ),
      linear-gradient(
        270deg,
        rgba(25, 135, 84, 1) 0px,
        rgba(25, 135, 84, 0) 9px
      ),
      linear-gradient(0deg, rgba(25, 135, 84, 1) 0px, rgba(25, 135, 84, 0) 9px),
      linear-gradient(90deg, rgba(25, 135, 84, 1) 0px, rgba(25, 135, 84, 0) 9px);
  }
}
</style>
