<template>
  <div class="radius-8 shadow-1 q-pa-sm q-mt-sm">
    <div class="row q-col-gutter-md">
      <div class="col column q-gutter-y-sm">
        <div class="column q-gutter-y-xs q-mt-none">
          <span class="text-body2">Estado Geral do Item/Apartamento</span>
          <div class="row q-gutter-x-sm">
            <q-btn
              v-for="opt in generalStateOptions"
              :key="opt.value"
              no-caps
              disable
              padding="1px"
              unelevated
              class="text-subtitle1 state-chip col"
              :class="
                rating.general_state === opt.value
                  ? 'state-chip--active'
                  : 'state-chip--inactive'
              "
              :label="opt.label"
            />
          </div>
        </div>

        <div class="row q-gutter-x-sm">
          <q-btn
            v-for="opt in conditionOptions"
            :key="opt.value"
            no-caps
            disable
            padding="1px"
            class="text-subtitle1 text-weight-regular state-chip col"
            :class="
              rating.condition === opt.value
                ? 'state-chip--active'
                : 'state-chip--inactive'
            "
            :label="opt.label"
          />
        </div>

        <div class="column">
          <span class="text-body2 q-mb-xs">Check-List de Itens</span>
          <q-list>
            <q-item
              v-for="item in checklistItems"
              :key="item.field"
              style="padding: 4px 8px; min-height: unset"
              dense
            >
              <q-item-section>
                <q-item-label class="text-body2 text-text-2">{{
                  item.label
                }}</q-item-label>
              </q-item-section>
              <q-item-section side>
                <q-toggle
                  :model-value="rating[item.field]"
                  color="primary"
                  dense
                  disable
                />
              </q-item-section>
            </q-item>
          </q-list>
        </div>

        <div class="column q-gutter-y-xs">
          <span class="text-body2">Danos/Itens faltantes e Observações:</span>
          <q-input
            :model-value="rating.notes || ''"
            type="textarea"
            disable
            autogrow
            bg-color="white"
            :input-style="{ minHeight: '106px' }"
            :placeholder="rating.notes ? '' : 'Nada a declarar'"
          />
        </div>
      </div>

      <div v-if="rating.medias && rating.medias.length" class="col">
        <span class="text-body2">Fotos</span>
        <div
          v-for="(photo, index) in rating.medias"
          :key="photo.id ?? index"
          class="row items-center justify-between"
        >
          <span class="text-caption text-text-2">foto.png</span>
          <q-btn
            flat
            dense
            round
            color="primary"
            icon="mdi-eye-outline"
            :href="photo.url"
            target="_blank"
            type="a"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from "vue";

const props = defineProps({
  rating: { type: Object, required: true },
});

const checklistItems = [
  { label: "Integridade Estrutural", field: "structural_integrity" },
  { label: "Funcionamento", field: "functioning" },
  { label: "Itens faltantes", field: "missing_items" },
];

const generalStateOptions = [
  { label: "Limpo", value: "clean" },
  { label: "Sujo", value: "dirty" },
];

const conditionMap = {
  clean: [
    { label: "Bom", value: "good" },
    { label: "Regular", value: "regular" },
    { label: "Ótimo", value: "great" },
  ],
  dirty: [
    { label: "Ruim", value: "bad" },
    { label: "Péssimo", value: "terrible" },
    { label: "Horrível", value: "horrible" },
  ],
};

const conditionOptions = computed(
  () => conditionMap[props.rating?.general_state] ?? [],
);
</script>

<style lang="scss" scoped>
@use "sass:map";

.state-chip {
  border-radius: 4px;
  border: 1px solid #111212;

  &--active {
    background-color: #467d79;
    color: white !important;
  }

  &--inactive {
    background-color: #f0f3f5;
    color: $primary !important;
  }
}

:deep(.q-btn:before) {
  box-shadow: none;
}
</style>
