<script setup>
const props = defineProps({
  featuredTemplates: { type: Array, required: true },
  availableTemplatesForFeatured: { type: Array, required: true },
  featuredTemplateIds: { type: Array, required: true },
  featuredListRef: { type: Function, required: true },
  saveFeaturedOrder: { type: Function, required: true },
  moveFeaturedTemplate: { type: Function, required: true },
  removeFeaturedTemplate: { type: Function, required: true },
  addFeaturedTemplate: { type: Function, required: true },
})
</script>

<template>
  <div class="panel">
    <div class="sectionHeader">
      <div>
        <div class="panel__title">홈 화면 상단 고정 순서</div>
        <div class="hint hint--tight">여기에 넣은 템플릿은 지정한 순서대로 먼저 노출되고, 나머지 템플릿은 최근 생성순으로 뒤에 이어집니다. 최대 50개까지 설정할 수 있어요.</div>
      </div>
      <button class="btn btn--primary" @click="props.saveFeaturedOrder">순서 저장</button>
    </div>

    <div class="featuredOrderPanel">
      <div class="featuredOrderPanel__list">
        <div class="section__title">상단 고정 목록</div>
        <div v-if="!props.featuredTemplates.length" class="hint">아직 상단 고정 템플릿이 없어요.</div>
        <div v-else :ref="props.featuredListRef" class="featuredList">
          <article v-for="(template, index) in props.featuredTemplates" :key="template.id" class="featuredCard" :data-featured-id="template.id">
            <div class="featuredCard__meta">
              <span class="featuredCard__rank">{{ index + 1 }}</span>
              <div>
                <div class="featuredCard__title">{{ template.name }}</div>
                <div class="featuredCard__id">{{ template.id }}</div>
              </div>
            </div>
            <div class="featuredCard__actions">
              <button class="btn btn--ghost btn--small" data-featured-handle>드래그</button>
              <button class="btn btn--ghost btn--small" :disabled="index === 0" @click="props.moveFeaturedTemplate(template.id, -1)">위로</button>
              <button class="btn btn--ghost btn--small" :disabled="index === props.featuredTemplates.length - 1" @click="props.moveFeaturedTemplate(template.id, 1)">아래로</button>
              <button class="btn btn--danger btn--small" @click="props.removeFeaturedTemplate(template.id)">제외</button>
            </div>
          </article>
        </div>
      </div>

      <div class="featuredOrderPanel__picker">
        <div class="section__title">템플릿 추가</div>
        <div class="featuredPickerList">
          <button
            v-for="template in props.availableTemplatesForFeatured"
            :key="template.id"
            class="featuredPickerItem"
            :disabled="props.featuredTemplateIds.length >= 50"
            @click="props.addFeaturedTemplate(template.id)"
          >
            <span>{{ template.name }}</span>
            <span class="featuredPickerItem__id">{{ template.id }}</span>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>
