import { Card, Flex, Typography } from 'antd';
import { plugins } from '../../../types/component-plugin';
import { StatusBadgeUI } from '../StatusBadgeUI';
import {
  createStatusBadgeTonePlugin,
  emphasizeDonePlugin,
  mapStatusBadgeInputToProps,
} from '../plugins';
import type { SampleMeta } from '../../../widgets/core';

const { Paragraph, Text } = Typography;

const sampleInputs = [
  { text: '기본 상태', status: 'ready' as const },
  { text: '진행 중', status: 'working' as const },
  { text: '이슈 발생', status: 'blocked' as const },
  { text: '배포 완료', status: 'done' as const },
];

export const sampleMeta: SampleMeta = {
  id: 'status-badge',
  componentId: 'status-badge',
  title: 'Status Badge',
  description: '상태 텍스트를 배지 UI로 변환하는 컴포넌트 샘플입니다.',
  category: 'Display',
  kind: 'feature',
  variantLabel: 'Showcase',
  order: 10,
  features: ['docs'],
};

export function Sample() {
  const tonePlugin = createStatusBadgeTonePlugin({ fallbackTone: 'warning' });

  return (
    <Card title="StatusBadge Sample" extra={<Text code>samples/Sample.tsx</Text>}>
      <Paragraph>
        대표 샘플은 기본 입력을 UI props로 변환한 뒤, 여러 props 플러그인을 배열로 합성해
        최종 렌더링에 반영하는 흐름을 보여줍니다.
      </Paragraph>

      <Flex gap="small" wrap>
        {sampleInputs.map((input) => {
          const baseProps = mapStatusBadgeInputToProps(input);
          const finalProps = plugins(baseProps, [tonePlugin, emphasizeDonePlugin(input)]);

          return <StatusBadgeUI key={`${input.text}-${input.status}`} {...finalProps} />;
        })}
      </Flex>
    </Card>
  );
}

export const StatusBadgeSample = Sample;
