import { Card, Flex, Typography } from 'antd';
import { useMemo, useState } from 'react';
import type { SampleMeta } from '../../../../widgets/core';
import { plugins } from '../../../../types/component-plugin';
import { createSelectPlaceholderPlugin, createSelectSortPlugin } from '../plugins';
import { SelectUI } from '../SelectUI';
import type { SelectOptionItem, SelectUIProps } from '../types';

const { Paragraph, Text } = Typography;

export const sampleMeta: SampleMeta = {
  id: 'select-input',
  componentId: 'select-input',
  title: 'Select Input',
  description: 'code/value 데이터를 받아 code를 값으로 유지하는 필터형 select combo 샘플입니다.',
  category: 'Inputs',
  kind: 'feature',
  variantLabel: 'Showcase',
  order: 41,
  features: ['docs'],
};

export function Sample() {
  const [selectedCode, setSelectedCode] = useState<string | undefined>('WH-001');

  const data = useMemo<SelectOptionItem[]>(
    () => [
      { code: 'WH-001', value: '서울 물류센터' },
      { code: 'WH-002', value: '김포 물류센터' },
      { code: 'WH-003', value: '부산 물류센터' },
      { code: 'WH-004', value: '대전 허브센터' },
    ],
    [],
  );

  const selectProps = plugins<SelectUIProps>(
    {
      data,
      value: selectedCode,
      onChange: (nextCode) => {
        setSelectedCode(nextCode);
      },
    },
    [createSelectPlaceholderPlugin('센터명을 검색하세요'), createSelectSortPlugin()],
  );

  const selectedItem = data.find((item) => item.code === selectedCode);

  return (
    <Card title="Select Input Sample" extra={<Text code>samples/Sample.tsx</Text>}>
      <Paragraph>
        `value`는 실제 저장값인 <Text strong>code</Text>를 유지하고, 드롭다운 표시 및 검색은
        <Text strong> value</Text> 기준으로 동작합니다.
      </Paragraph>

      <Flex vertical gap="small">
        <SelectUI {...selectProps} />
        <Text>선택 code: {selectedCode ?? '-'}</Text>
        <Text>선택 value: {selectedItem?.value ?? '-'}</Text>
      </Flex>
    </Card>
  );
}