import { Badge, ScrollArea, SectionCard, SegmentedControl } from '../../core';
import { useT } from '../../../hooks/useT';
import type { AsukaView } from './types';

export type ViewSwitcherOption = { value: string; label: string };

export type ViewSwitcherPanelProps = {
  views: AsukaView[];
  activeId: string;
  options: ViewSwitcherOption[];
  onSelect: (viewId: string) => void;
};

export function ViewSwitcherPanel({ views, activeId, options, onSelect }: ViewSwitcherPanelProps) {
  const t = useT();
  const active = views.find((view) => view.id === activeId);
  const activeEngine = String((active as any)?.engine ?? 'fabric').trim().toLowerCase() === '3d' ? '3d' : 'fabric';

  return (
    <SectionCard
      padding="md"
      title={t('ui.switch_view', 'Switch view')}
      actions={<Badge size="sm" variant="neutral">{t('ui.count_total', '{count} total', { count: views.length })}</Badge>}
      contentClassName="ask-flex ask-flex-col ask-gap-3"
    >
      <div className="ask-flex ask-flex-wrap ask-items-center ask-gap-2">
        <div className="ask-truncate ask-text-sm ask-font-semibold ask-text-textMain">
          {active?.label ?? active?.name ?? t('modules.views', 'Views')}
        </div>
        {active ? (
          <Badge size="sm" variant={activeEngine === '3d' ? 'primary' : 'surface'}>
            {activeEngine === '3d' ? t('views.engine.badge3d', '3D') : t('views.engine.badge2d', '2D')}
          </Badge>
        ) : null}
      </div>
      <div className="ask-rounded-[18px] ask-border ask-border-borderSubtle/70 ask-bg-surfaceAlt ask-p-2">
        <ScrollArea axis="horizontal" viewportClassName="ask-flex ask-items-center">
          <SegmentedControl value={activeId} options={options} onChange={onSelect} className="ask-w-max" />
        </ScrollArea>
      </div>
    </SectionCard>
  );
}
