import {
  InfoIcon,
  listItemSectionBuilder,
  listItemSelectBuilder,
} from '@wix/design-system';
import {
  BasicCategory,
  PREDEFINED_VIEWS_ID,
  PrivateView,
  SAVED_VIEWS_ID,
  ViewsState,
} from '../../index';
import { FiltersMap } from '@wix/bex-core';
import React from 'react';

export function getCategoryName<F extends FiltersMap>({
  category,
  viewsState,
}: {
  viewsState: ViewsState<F>;
  category: BasicCategory;
}) {
  const { translate: t } = viewsState.collection;
  if (category.id === SAVED_VIEWS_ID) {
    return t('cairo.viewDropdown.category.savedViews');
  }
  if (category.id === PREDEFINED_VIEWS_ID) {
    return t('cairo.viewDropdown.category.predefinedViews');
  }
  return category.name;
}

export function buildCategoryOption<F extends FiltersMap>({
  viewsState,
  category,
}: {
  viewsState: ViewsState<F>;
  category: BasicCategory;
}) {
  return listItemSectionBuilder({
    id: category.id,
    title: getCategoryName({ category, viewsState }),
    type: 'subheader',
    dataHook: 'view-category',
    suffix: category.info ? (
      <InfoIcon {...{ size: 'small', ...category.info }} />
    ) : undefined,
  });
}

export function getViewName<F extends FiltersMap>({
  view,
}: {
  viewsState: ViewsState<F>;
  view: PrivateView<F>;
}) {
  if (view.name.length > 0) {
    return view.name;
  }

  return '';
}

export function buildViewOption<F extends FiltersMap>({
  viewsState,
  view,
}: {
  viewsState: ViewsState<F>;
  view: PrivateView<F>;
}) {
  const viewName = getViewName({ view, viewsState });

  return listItemSelectBuilder({
    id: view.id,
    title: viewName,
    label: viewName,
    dataHook: `view-item`,
  });
}
