<template>
  <p-card class="work-pool-card">
    <p-content secondary>
      <div class="work-pool-card__header">
        <div class="work-pool-card__heading">
          <div class="work-pool-card__name">
            <p-link class="work-pool-card__name" :to="routes.workPool(workPool.name)">
              {{ workPool.name }}
            </p-link>
            <WorkPoolStatusIcon :work-pool="workPool" />
          </div>
          <ProcessTypeBadge :type-label="workPool.typeLabel" />
          <WorkersLateIndicator v-if="!media.sm" :work-pool-name="workPool.name" />
        </div>

        <div class="work-pool-card__header-actions">
          <WorkersLateIndicator v-if="media.sm" :work-pool-name="workPool.name" />
          <WorkPoolToggle :work-pool="workPool" @update="emit('update')" />
          <WorkPoolMenu :work-pool="workPool" @delete="emit('update')" />
        </div>
      </div>

      <template v-if="workPool.description">
        <p class="work-pool-card__description">
          {{ workPool.description }}
        </p>
      </template>

      <div class="work-pool-card__details">
        <div>
          <span class="work-pool-card__details-label">Concurrency Limit</span>
          {{ workPool.concurrencyLimit ? workPool.concurrencyLimit : 'Unlimited' }}
        </div>


        <div v-if="lastPolled">
          <span class="work-pool-card__details-label">Last Polled</span>
          {{ lastPolled }}
        </div>
      </div>
    </p-content>
  </p-card>
</template>

<script lang="ts" setup>
  import { media } from '@prefecthq/prefect-design'
  import { computed } from 'vue'
  import { WorkPoolToggle, WorkersLateIndicator, ProcessTypeBadge, WorkPoolStatusIcon } from '@/components'
  import { useComponent, useWorkPoolLastPolled, useWorkspaceRoutes } from '@/compositions'
  import { WorkPool } from '@/models'

  const props = defineProps<{
    workPool: WorkPool,
  }>()

  const { WorkPoolMenu } = useComponent()

  const routes = useWorkspaceRoutes()

  const subscriptionOptions = {
    interval: 30000,
  }
  const workPoolName = computed(() => props.workPool.name)

  const { lastPolled } = useWorkPoolLastPolled(workPoolName, subscriptionOptions)

  const emit = defineEmits<{
    (event: 'update'): void,
  }>()
</script>

<style>
.work-pool-card__header { @apply
  flex
  gap-2
  items-center
  justify-between
}

.work-pool-card__name { @apply
  text-lg
}

.work-pool-card__header-actions { @apply
  flex
  gap-2
  items-center
}

.work-pool-card__description { @apply
  text-sm
}

.work-pool-card__details { @apply
  flex
  gap-8
  items-center
  text-sm
}

.work-pool-card__details-label { @apply
  font-medium
  mr-2
}

.work-pool-card__heading { @apply
  flex
  flex-col
  gap-2
  items-start
}

.work-pool-card__name { @apply
  flex
  items-center
  gap-2
}
</style>
