<script setup lang="ts">
import { useAdminLocale } from '../composables/useAdminLocale';
import AdminResponsiveRowActions from './AdminResponsiveRowActions.vue';

export type AgentActionRow = {
  userId: number | string;
  status: string;
};

withDefaults(
  defineProps<{
    row: AgentActionRow;
    showDetail?: boolean;
    canCreateSub?: boolean;
    createSubLabel?: string;
  }>(),
  {
    showDetail: true,
    canCreateSub: false,
    createSubLabel: '',
  },
);

const emit = defineEmits<{
  detail: [];
  edit: [];
  credit: [];
  createSub: [];
  freeze: [];
}>();

const { t } = useAdminLocale();
</script>

<template>
  <AdminResponsiveRowActions>
    <template #inline>
      <el-button v-if="showDetail" link type="primary" size="small" @click="emit('detail')">
        {{ t('common.detail') }}
      </el-button>
      <el-button link type="primary" size="small" @click="emit('edit')">{{ t('common.edit') }}</el-button>
      <el-button link type="primary" size="small" @click="emit('credit')">{{ t('common.adjust_credit') }}</el-button>
      <el-button v-if="canCreateSub" link type="primary" size="small" @click="emit('createSub')">
        {{ createSubLabel }}
      </el-button>
      <el-button
        v-if="row.status === 'ACTIVE'"
        link
        type="warning"
        size="small"
        @click="emit('freeze')"
      >
        {{ t('common.freeze') }}
      </el-button>
      <el-button v-else link type="primary" size="small" @click="emit('freeze')">
        {{ t('common.unfreeze') }}
      </el-button>
    </template>
    <template #menu>
      <el-dropdown-item v-if="showDetail" @click="emit('detail')">{{ t('common.detail') }}</el-dropdown-item>
      <el-dropdown-item @click="emit('edit')">{{ t('common.edit') }}</el-dropdown-item>
      <el-dropdown-item @click="emit('credit')">{{ t('common.adjust_credit') }}</el-dropdown-item>
      <el-dropdown-item v-if="canCreateSub" @click="emit('createSub')">{{ createSubLabel }}</el-dropdown-item>
      <el-dropdown-item v-if="row.status === 'ACTIVE'" divided @click="emit('freeze')">
        <span class="action-warning">{{ t('common.freeze') }}</span>
      </el-dropdown-item>
      <el-dropdown-item v-else divided @click="emit('freeze')">{{ t('common.unfreeze') }}</el-dropdown-item>
    </template>
  </AdminResponsiveRowActions>
</template>

<style scoped>
:deep(.action-warning) {
  color: var(--el-color-warning);
}
</style>
