import { computed, defineComponent, ref } from 'vue';
import type { PropType } from 'vue';
import { ElButton, ElPopover } from 'element-plus';
import { $t } from '@/locales';

export type BusinessTableAction = {
  key: string;
  label: string;
  buttonType?: 'primary' | 'success' | 'warning' | 'danger' | 'info';
  disabled?: boolean;
  onClick: () => void | Promise<void>;
};

export default defineComponent({
  name: 'BusinessTableActionCell',
  props: {
    actions: {
      type: Array as PropType<BusinessTableAction[]>,
      required: true
    }
  },
  setup(props) {
    const popoverVisible = ref(false);

    const directActions = computed(() => {
      if (props.actions.length <= 2) {
        return props.actions;
      }

      return props.actions.slice(0, 1);
    });

    const moreActions = computed(() => {
      if (props.actions.length <= 2) {
        return [];
      }

      return props.actions.slice(1);
    });

    async function handleAction(action: BusinessTableAction) {
      if (action.disabled) {
        return;
      }

      popoverVisible.value = false;
      await action.onClick();
    }

    return () => (
      <div class="business-table-action-cell" onClick={event => event.stopPropagation()}>
        {directActions.value.map(action => (
          <ElButton
            key={action.key}
            plain
            size="small"
            type={action.buttonType}
            disabled={action.disabled}
            class="business-table-action-button"
            onClick={() => handleAction(action)}
          >
            {action.label}
          </ElButton>
        ))}

        {moreActions.value.length > 0 && (
          <ElPopover
            v-model:visible={popoverVisible.value}
            placement="bottom-end"
            trigger="click"
            width={120}
            show-arrow={false}
          >
            {{
              reference: () => (
                <ElButton
                  plain
                  size="small"
                  class="business-table-action-button"
                  onClick={event => event.stopPropagation()}
                >
                  <span class="inline-flex items-center gap-4px">
                    {$t('common.more')}
                    <icon-mdi-chevron-down class="text-14px" />
                  </span>
                </ElButton>
              ),
              default: () => (
                <div class="business-table-action-menu">
                  {moreActions.value.map(action => (
                    <ElButton
                      key={action.key}
                      plain
                      size="small"
                      type={action.buttonType}
                      disabled={action.disabled}
                      class="business-table-action-menu__button"
                      onClick={() => handleAction(action)}
                    >
                      {action.label}
                    </ElButton>
                  ))}
                </div>
              )
            }}
          </ElPopover>
        )}
      </div>
    );
  }
});