import { Button, EmptyState } from '../../core';
import { useT } from '../../../hooks/useT';
import { ViewCard } from './ViewCard';
import type { AsukaView } from './types';

export type ViewListPanelProps = {
  views: AsukaView[];
  activeId: string;
  canAdd?: boolean;
  canEdit?: boolean | ((viewId: string) => boolean);
  canDelete?: boolean | ((viewId: string) => boolean);
  onAdd?: () => void;
  onSelect?: (viewId: string) => void;
  onEdit?: (viewId: string) => void;
  onDelete?: (viewId: string) => void;
};

export function ViewListPanel({
  views,
  activeId,
  canAdd,
  canEdit = false,
  canDelete = false,
  onAdd,
  onSelect,
  onEdit,
  onDelete,
}: ViewListPanelProps) {
  const t = useT();

  if (!views.length) {
    return (
      <EmptyState
        title={t('ui.no_views_yet', 'No views yet.')}
        description={t(
          'ui.views_let_you_manage_multiple_canvases_like_front_or_back_variants_or_export_sizes',
          'Views let you manage multiple canvases like front/back, variants, or export sizes.',
        )}
        action={
          canAdd ? (
            <Button size="sm" variant="primary" onClick={onAdd}>
              {t('ui.add_view', 'Add view')}
            </Button>
          ) : null
        }
      />
    );
  }

  return (
    <div className="ask-flex ask-flex-col ask-gap-4">
      {views.map((view) => (
        <ViewCard
          key={view.id}
          view={view}
          active={view.id === activeId}
          canEdit={typeof canEdit === 'function' ? canEdit(view.id) : canEdit}
          canDelete={typeof canDelete === 'function' ? canDelete(view.id) : canDelete}
          onSelect={onSelect}
          onEdit={onEdit}
          onDelete={onDelete}
        />
      ))}
    </div>
  );
}
