<script setup>
import { ref, watch } from "vue";
import {
  CircleIcon,
  CheckCircleIcon,
  Edit2Icon,
  TrashIcon,
  AlertCircleIcon,
  CopyIcon,
  UploadCloudIcon,
} from "lucide-vue-next";
import { DownloadIcon } from "lucide-vue-next";

defineProps(["timetable", "editable", "remote", "selected", "admin"]);
defineEmits(["click", "edit", "delete", "copy", "export", "upload"]);

const deleteConfirm = ref(false);

watch(deleteConfirm, (value) => {
  if (value) {
    setTimeout(() => (deleteConfirm.value = false), 2000);
  }
});
</script>

<template>
  <div class="card">
    <div class="button" @click="$emit('click')">
      <CheckCircleIcon v-if="selected" />
      <CircleIcon v-else />

      <div class="info">
        <span class="name">{{ timetable.title }}</span>
        <span class="detail"
          >{{ $t("settings.source") }}: {{ timetable.source }}
          <span v-if="admin"
            >, Class: {{ timetable.class }}, Id: {{ timetable.id }}</span
          ></span
        >
      </div>
    </div>

    <div class="buttons">
      <DownloadIcon v-if="!admin" @click="$emit('export')" />
      <Edit2Icon v-if="editable && !remote" @click="$emit('edit')" />
      <UploadCloudIcon v-if="editable && remote" @click="$emit('upload')" />
      <CopyIcon v-if="!admin" @click="$emit('copy')" />
      <TrashIcon
        v-if="editable && !remote && !deleteConfirm"
        @click="deleteConfirm = true"
      />
      <AlertCircleIcon
        v-if="editable && deleteConfirm"
        color="red"
        @click="$emit('delete')"
      />
    </div>
  </div>
</template>

<style scoped>
.card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 15px;
  background-color: var(--element-color);
  border-radius: 7px;
  padding: 10px;
  align-items: center;
  cursor: pointer;
}

.button {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 15px;
  align-items: center;
}

.info {
  display: grid;
  grid-template-rows: 1fr 1fr;
}

.name {
  font-weight: bold;
}

.detail {
  opacity: 0.6;
}

.buttons {
  display: flex;
  gap: 7px;
  opacity: 0.7;
}
</style>
