import { Button, Space, Typography } from 'antd';
import { useRef } from 'react';
import type { SampleMeta, SampleRenderProps, WidgetHandle } from '../../core';
import { ApiSampleCardWidget } from '../ApiSampleCardWidget';

const { Paragraph, Text } = Typography;

export const sampleMeta: SampleMeta = {
  id: 'api-sample-card-widget',
  componentId: 'api-sample-card-widget',
  title: 'API Sample Card Widget',
  description: 'Wrapper, title, main content, feature tag를 공통 규칙으로 가지는 위젯 샘플입니다.',
  category: 'Widgets',
  kind: 'base',
  variantLabel: 'Base',
  order: 10,
  features: ['api-sample', 'feature-registry', 'imperative-handle'],
};

export function Sample({ disableWidgetCardWrapper }: SampleRenderProps) {
  const widgetRef = useRef<WidgetHandle>(null);

  return (
    <Space direction="vertical" size={12} className="widget-shell__body">
      <Paragraph>
        이 샘플은 실제 위젯 자체를 보여줍니다. 아래 버튼은{' '}
        <Text strong>`useImperativeHandle`</Text>로 노출한 메서드를 호출합니다.
      </Paragraph>

      <Space wrap>
        <Button
          onClick={() => {
            widgetRef.current?.focus();
          }}
        >
          Widget Focus
        </Button>
        <Button
          onClick={() => {
            widgetRef.current?.scrollIntoView({ behavior: 'smooth', block: 'center' });
          }}
        >
          Scroll Into View
        </Button>
      </Space>

      <ApiSampleCardWidget
        ref={widgetRef}
        sampleMeta={sampleMeta}
        cardWrapper={!disableWidgetCardWrapper}
      >
        <Space direction="vertical" size={8}>
          <Text code>GET /api/components/samples</Text>
          <Text type="secondary">
            컴포넌트 대표 샘플을 API 게시판 카드 위젯으로 재사용하는 예시입니다.
          </Text>
        </Space>
      </ApiSampleCardWidget>
    </Space>
  );
}
