<template>

  <div class="calculation-list-row">
    <div class="edit-calculation-checkbox-cell">
      <checkbox :checked="checked" @checkbox-changed="updateCheckBox"></checkbox>
    </div>
    <div class="edit-calculation-material-cell">
      <div class="material-name">{{ premise.material.name }}</div>
      <div class="material-code">{{ premise.material.part_number }}</div>
    </div>
    <div class="calculation-list-supplier-cell">
      <div class="calculation-list-supplier-flag">
        <flag :iso="premise.supplier.country.iso_code"></flag>
      </div>
      <div class="calculation-list-supplier-data">
        <div class="supplier-name">{{ premise.supplier.name }}</div>
        <div class="supplier-address">{{ premise.supplier.address }}</div>
      </div>
    </div>
    <div class="calculation-list-status-cell">
      <basic-badge :variant="variant" :icon="variantIcon">{{ premise.state }}</basic-badge>
    </div>
    <div class="calculation-list-actions-cell">
      <icon-button :disabled="!isDraft" icon="pencil-simple" @click="editClick" help-text="Edit this calculation"
                   help-text-position="left"></icon-button>
      <icon-button :disabled="!isDraft" icon="trash" @click="deleteClick" help-text="Delete this calculation"
                   help-text-position="left"></icon-button>
      <icon-button :disabled="isDraft || isArchived" icon="archive" @click="archiveClick" help-text="Archive/hide this calculation"
                   help-text-position="left"></icon-button>
    </div>
  </div>
</template>

<script>

import IconButton from "@/components/UI/IconButton.vue";
import BasicBadge from "@/components/UI/BasicBadge.vue";
import Checkbox from "@/components/UI/Checkbox.vue";
import {mapStores} from "pinia";
import {usePremiseStore} from "@/store/premise.js";
import Flag from "@/components/UI/Flag.vue";
import {UrlSafeBase64} from "@/common.js";

export default {
  name: "CalculationListItem",
  components: {Flag, Checkbox, BasicBadge, IconButton},
  emits: ['updateCheckbox', 'updatePagination'],
  props: {
    id: {
      type: Number,
      required: true
    },
    checked: {
      type: Boolean,
      required: true
    }
  },
  computed: {
    ...mapStores(usePremiseStore),
    premise() {
      const data = this.premiseStore.getById(this.id);
      return data;
    },
    variant() {
      if (this.premise.state === 'DRAFT') {
        return 'secondary';
      } else if (this.premise.state === 'ARCHIVED') {
        return 'grey';
      } else if (this.premise.state === 'COMPLETED') {
        return 'primary';
      } else if (this.premise.state === 'EXCEPTION') {
        return 'exception';
      } else {
        return 'grey';
      }
    },
    variantIcon() {
      if (this.premise.state === 'DRAFT') {
        return 'pencil-simple';
      } else if (this.premise.state === 'ARCHIVED') {
        return 'archive';
      } else if (this.premise.state === 'COMPLETED') {
        return 'check';
      } else if (this.premise.state === 'EXCEPTION') {
        return 'warning';
      } else {
        return 'grey';
      }
    },
    isDraft() {
      return this.premise.state === 'DRAFT';
    },
    isArchived() {
      return this.premise.state === 'ARCHIVED';
    }
  },
  methods: {
    updateCheckBox(checked) {
      this.$emit('updateCheckbox', {checked: checked, id: this.id});
    },
    editClick() {
      if(this.premise.state === 'DRAFT') {
        const urlStr = new UrlSafeBase64().encodeIds([this.id]);
        this.$router.push({name: 'edit', params: {id: urlStr}});
      }
    },
    deleteClick() {
      if(this.premise.state === 'DRAFT') {
        this.premiseStore.deletePremisses([this.id])
        this.$emit('updatePagination');
      }
    },
    archiveClick() {
      if(this.premise.state !== 'DRAFT' && this.premise.state !== 'ARCHIVED') {
        this.premiseStore.archivePremisses([this.id])
        this.$emit('updatePagination');
      }
    }
  }
}
</script>

<style scoped>

.calculation-list-row {
  display: grid;
  grid-template-columns: 6rem 1fr 2fr 14rem 10rem;
  gap: 1.6rem;
  padding: 1.6rem;
  border-bottom: 0.16rem solid #f3f4f6;
  align-items: center;
  transition: background-color 0.2s ease;
}

.calculation-list-row:hover {
  background-color: rgba(107, 134, 156, 0.05);
}

.calculation-list-row:last-child {
  border-bottom: none;
}

.edit-calculation-checkbox-cell {
  display: flex;
  align-items: center;
  justify-content: center;
}

.edit-calculation-material-cell {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.material-name {
  font-weight: 600;
  color: #001D33;
  font-size: 1.6rem;
}

.material-code {
  color: #6b7280;
  font-size: 1.4rem;
}

.calculation-list-supplier-cell {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.5rem;
}

.calculation-list-supplier-flag {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.calculation-list-supplier-data {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.4rem;
}

.supplier-name {
  font-weight: 600;
  color: #001D33;
  font-size: 1.6rem;
}

.supplier-address {
  color: #6b7280;
  font-size: 1.4rem;
  line-height: 1.4;
}

.calculation-list-status-cell {
  display: flex;
  justify-content: start;
}

.calculation-list-actions-cell {
  display: flex;
  gap: 0.8rem;
  justify-content: start;
}

@media (max-width: 768px) {


  .calculation-list-row {
    grid-template-columns: 1fr;
    gap: 0.8rem;
    padding: 1.6rem;
    grid-template-areas:
                    "checkbox"
                    "material"
                    "supplier"
                    "status"
                    "actions";
  }

  .edit-calculation-checkbox-cell {
    grid-area: checkbox;
    justify-content: flex-start;
  }

  .edit-calculation-material-cell {
    grid-area: material;
  }

  .calculation-list-supplier-cell {
    grid-area: supplier;
  }

  .calculation-list-status-cell {
    grid-area: status;
    justify-content: flex-start;
  }

  .calculation-list-actions-cell {
    grid-area: actions;
    justify-content: flex-start;
  }
}
</style>