import { Empty, Flex } from 'antd';
import { createElement, useEffect, useState } from 'react';
import { widgetSampleEntries } from '../../../app/manifests/samples.manifest';
import type { LoadedSampleEntry } from '../../../samples/registry';
import { resolveSampleEntries } from '../../../samples/registry';

export function DashboardReportGalleryLayout() {
  const [dashboardSamples, setDashboardSamples] = useState<LoadedSampleEntry[]>([]);

  useEffect(() => {
    let mounted = true;

    void resolveSampleEntries(widgetSampleEntries, '/widgets/').then((loadedEntries) => {
      if (mounted) {
        setDashboardSamples(
          loadedEntries.filter((entry) => entry.sampleMeta.componentId === 'dashboard-report-card'),
        );
      }
    });

    return () => {
      mounted = false;
    };
  }, []);

  if (dashboardSamples.length === 0) {
    return <Empty description="표시할 대시보드 카드 샘플이 없습니다." />;
  }

  return (
    <Flex gap={20} wrap className="dashboard-widget-grid">
      {dashboardSamples.map(({ modulePath, Sample }) => (
        <div key={modulePath} className="dashboard-widget-grid__item">
          {createElement(Sample)}
        </div>
      ))}
    </Flex>
  );
}
