<template>
  <div class="wt-action-bar">
    <!--    @slot searchbar here
            @scope `{ size<ComponentSize> }`
     -->
    <slot
      name="search-bar"
      v-bind="{ size }"
    />

    <!--    @slot custom actions here
            @scope `{ size<ComponentSize> }`
     -->
    <slot v-bind="{ size }" />

    <!--    @slot May be useful to set complex component which draws the same `wt-icon-action`
            @scope `{ action<IconAction>, size<ComponentSize>, onClick: () => emit('click:[action]') }`
      -->
    <slot
      v-for="action in shownActions"
      :name="action"
      v-bind="{ action, size, onClick: () => handleActionClick(action) }"
    >
      <wt-icon-action
        :action="action"
        :disabled="props[`disabled:${kebabToCamel(action)}`]"
        v-bind="getActionProps(action)"
        @click="handleActionClick(action)"
      />
    </slot>
  </div>
</template>

<script setup>
import { computed } from 'vue';

import IconAction from '../../enums/IconAction/IconAction.enum.js';
import { kebabToCamel } from '../../scripts/caseConverters.js';
import { SortSymbols } from '../../scripts/sortQueryAdapters.js';
import WtIconAction from '../wt-icon-action/wt-icon-action.vue';
import {
	sectionActionsOrder,
	tableActionsOrder,
} from './WtActionBarActionsOrder.js';

const props = defineProps({
	/**
	 * [`'table'`, `'section'`]
	 * */
	mode: {
		type: String,
		default: 'table',
		validator: (v) =>
			[
				'table',
				'section',
			].includes(v),
	},

	/**
	 * Not implemented
	 */
	size: {
		type: String,
		// default: 'md',
		// validator: (v) => ['sm', 'md', 'lg'].includes(v),
	},

	/**
	 * Leave the default value for the mode only listed in includes prop
	 */

	include: {
		type: Array,
		default: () => [],
	},

	/**
	 * Leave the default values for the mode, except for those in exclude prop
	 */

	exclude: {
		type: Array,
		default: () => [],
	},

	'sort:order': {
		type: String,
		default: null,
		required: false,
		validator: (v) => Object.values(SortSymbols).includes(v),
	},

	/**
	 * Built dynamically on `disabled:[IconAction]` pattern for all available [IconActions](../../enums/IconAction/Readme.md).
	 */

	disabled: {
		// Not implemented, but can be used to disable all actions
		type: Boolean,
		default: false,
	},

	...Object.values(IconAction).reduce((acc, action) => {
		acc[`disabled:${action}`] = {
			type: Boolean,
			default: false,
		};
		return acc;
	}, {}),
});
const emit = defineEmits([
	/**
	 * click:IconAction
	 */
	...Object.values(IconAction).map((action) => `click:${action}`),
]);

const shownActions = computed(() => {
	const actionsOrder =
		props.mode === 'section' ? sectionActionsOrder : tableActionsOrder;

	if (props.include.length)
		return actionsOrder.filter((action) => props.include.includes(action));

	if (props.exclude.length)
		return actionsOrder.filter((action) => !props.exclude.includes(action));

	return actionsOrder;
});

const handleActionClick = (action) => {
	emit(`click:${action}`);
};

const getActionProps = (action) => {
	switch (action) {
		case IconAction.SORT:
			return {
				'sort:order': props['sort:order'],
			};
		default:
			return {};
	}
};
</script>

<style scoped>
.wt-action-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
}
</style>
