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

export function getCategoryName<F extends FiltersMap>({
  category,
  viewsState,
}: {
  viewsState: ViewsState<F>;
  category: BasicCategory;
}) {
  const { translate: t } = viewsState.collection;

  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;
}) {
  const { translate: t } = viewsState.collection;
  const categoryName = getCategoryName({ category, viewsState });

  return listItemSectionBuilder({
    id: category.id,
    title: categoryName,
    type: 'subheader',
    dataHook: 'view-category',
    suffix: (
      <InfoIcon
        size="small"
        content={t('cairo.viewDropdown.category.info' as TranslationsKeys)}
        tooltipProps={{ maxWidth: 240 }}
      />
    ),
  });
}

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,
  suffix,
}: {
  viewsState: ViewsState<F>;
  view: PrivateView<F>;
  suffix?: ReactNode;
}) {
  const viewName = getViewName({ view, viewsState });
  return listItemSelectBuilder({
    id: view.id,
    title: viewName,
    label: viewName,
    dataHook: 'view-item',
    suffix,
  });
}