import { ColumnsConfig, W2WToolbarConfig } from 'src/layouts/w2w-toolbar/W2WToolbarConfig';
import { computed, ComputedRef } from 'vue';
import { DynamicTableCustomConfig, DynamicTableViewsRefs } from '../../models';
import { useContextParams } from './useContextParams';

export function useToolbarConfig(refs: ComputedRef<DynamicTableViewsRefs>, columnsConfig: ComputedRef<ColumnsConfig>) {
  const layoutCode = computed(() => refs.value.customConfig?.layout?.code ?? [refs.value.context, 'tabla', refs.value.idGama].join('_'));
  const { contextParams, isVisible } = useContextParams();

  const toolbarConfig = computed(() => {
    const layout = refs.value.layout;
    const customConfig = refs.value.customConfig as DynamicTableCustomConfig | undefined;

    const _buttons =
      refs.value.customConfig?.toolbar?.buttons?.filter((button) => (button?.show ? button.show(contextParams.value) : true)) ||
      (layout.actionsGroups?.find((group) => group.code === 'ungrouped')?.actions || [])
        .filter((button) => (button?.visibility ? isVisible(button.visibility) : true))
        .map((button) => ({ ...button, action: button.code }));

    return {
      columns: {
        ...columnsConfig.value,
        persists: true,
      },
      layoutCode: layoutCode.value,
      title: customConfig?.layout?.hideTitle ? null : refs.value.title || layout.title,
      filters: {
        items: layout?.filters,
        persists: true,
      },
      states: customConfig?.layout?.hideStats ? null : layout.states,
      searchInput: { show: true, placeholder: 'Buscar...' },
      buttons: _buttons,
      buttonGroups: layout?.actionsGroups,
      showToggleView: !!layout?.showGrid,
    } as W2WToolbarConfig;
  });

  return {
    toolbarConfig,
  };
}