import { Card, Typography } from 'antd';
import { useMemo } from 'react';
import { useLocation } from 'react-router-dom';
import { ComponentSamplesLayout } from '../../../features/layout/component-sample-gallery';
import { SampleWidgetsLayout } from '../../../features/layout/widget-sample-gallery';
import { useMainLayoutContext } from '../layout/MainLayoutContext';
import { readPreviewTargetDescriptorFromUrl } from '../previewRuntime';

const { Paragraph } = Typography;
const HIDDEN_COMPONENT_IDS = ['search-command-modal', 'window-ui'];

export function ApisPage() {
  const location = useLocation();
  const { selectedApiMenu, componentSampleEntries, widgetSampleEntries } = useMainLayoutContext();
  const previewTarget = useMemo(() => readPreviewTargetDescriptorFromUrl(), [location.search]);
  const isSingleWidgetPreview = selectedApiMenu === 'widgets' && previewTarget?.type === 'widget';

  return (
    <div className={`app-main-panel${isSingleWidgetPreview ? ' app-main-panel--widget-preview' : ''}`}>
      <Card
        title={selectedApiMenu === 'components' ? 'APIs / Components' : 'APIs / Widgets'}
        className={`app-main-card${isSingleWidgetPreview ? ' app-main-card--widget-preview' : ''}`}
        bordered={false}
      >
        {isSingleWidgetPreview ? null : (
          <Paragraph className="app-main-copy">
            {selectedApiMenu === 'components'
              ? '공통 UI 컴포넌트 샘플과 확장 샘플을 확인합니다.'
              : '공통 위젯 샘플을 확인합니다.'}
          </Paragraph>
        )}

        {selectedApiMenu === 'components' ? (
          <ComponentSamplesLayout entries={componentSampleEntries} excludeComponentIds={HIDDEN_COMPONENT_IDS} />
        ) : (
          <SampleWidgetsLayout
            entries={widgetSampleEntries}
            includeComponentIds={isSingleWidgetPreview ? [previewTarget.componentId] : []}
            includeSampleIds={isSingleWidgetPreview && previewTarget.sampleId ? [previewTarget.sampleId] : []}
            disableWidgetCardWrapper={isSingleWidgetPreview}
            singlePreviewMode={isSingleWidgetPreview}
          />
        )}
      </Card>
    </div>
  );
}