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

export type PlayerActionRow = {
  id: number | string;
  username: string;
  status: string;
};

withDefaults(
  defineProps<{
    row: PlayerActionRow;
    showDetail?: boolean;
    showLedger?: boolean;
    showEdit?: boolean;
    showDeposit?: boolean;
    showWithdraw?: boolean;
    showFreeze?: boolean;
    showDelete?: boolean;
  }>(),
  {
    showDetail: true,
    showLedger: true,
    showEdit: true,
    showDeposit: true,
    showWithdraw: true,
    showFreeze: true,
    showDelete: true,
  },
);

const emit = defineEmits<{
  detail: [];
  ledger: [];
  edit: [];
  deposit: [];
  withdraw: [];
  freeze: [];
  delete: [];
}>();

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 v-if="showLedger" link type="primary" size="small" @click="emit('ledger')">
        {{ t('user.action.ledger_short') }}
      </el-button>
      <el-button v-if="showEdit" link type="primary" size="small" @click="emit('edit')">{{ t('common.edit') }}</el-button>
      <el-button v-if="showDeposit" link type="success" size="small" @click="emit('deposit')">{{ t('common.topup') }}</el-button>
      <el-button v-if="showWithdraw" link type="warning" size="small" @click="emit('withdraw')">
        {{ t('agent_portal.withdraw_btn_label') }}
      </el-button>
      <el-button
        v-if="showFreeze && row.status === 'ACTIVE'"
        link
        type="warning"
        size="small"
        @click="emit('freeze')"
      >
        {{ t('common.freeze') }}
      </el-button>
      <el-button v-else-if="showFreeze" link type="primary" size="small" @click="emit('freeze')">
        {{ t('common.unfreeze') }}
      </el-button>
      <el-button v-if="showDelete" link type="danger" size="small" @click="emit('delete')">
        {{ t('common.delete') }}
      </el-button>
    </template>
    <template #menu>
      <el-dropdown-item v-if="showDetail" @click="emit('detail')">{{ t('common.detail') }}</el-dropdown-item>
      <el-dropdown-item v-if="showLedger" @click="emit('ledger')">{{ t('user.action.view_wallet_ledger') }}</el-dropdown-item>
      <el-dropdown-item v-if="showEdit" @click="emit('edit')">{{ t('common.edit') }}</el-dropdown-item>
      <el-dropdown-item v-if="showDeposit" divided @click="emit('deposit')">{{ t('common.topup') }}</el-dropdown-item>
      <el-dropdown-item v-if="showWithdraw" @click="emit('withdraw')">
        <span class="action-warning">{{ t('agent_portal.withdraw_btn_label') }}</span>
      </el-dropdown-item>
      <el-dropdown-item v-if="showFreeze && row.status === 'ACTIVE'" @click="emit('freeze')">
        <span class="action-warning">{{ t('common.freeze') }}</span>
      </el-dropdown-item>
      <el-dropdown-item v-else-if="showFreeze" @click="emit('freeze')">{{ t('common.unfreeze') }}</el-dropdown-item>
      <el-dropdown-item v-if="showDelete" divided @click="emit('delete')">
        <span class="action-danger">{{ t('common.delete') }}</span>
      </el-dropdown-item>
    </template>
  </AdminResponsiveRowActions>
</template>

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