import { Card, Flex, Typography } from 'antd';
import { useMemo, useState } from 'react';
import type { SampleMeta } from '../../../../widgets/core';
import { plugins } from '../../../../types/component-plugin';
import {
  createCheckComboPlaceholderPlugin,
  createCheckComboSortPlugin,
} from '../plugins';
import { CheckComboUI } from '../CheckComboUI';
import type { CheckComboUIProps, SelectOptionItem } from '../types';

const { Paragraph, Text } = Typography;

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

export function Sample() {
  const [selectedCodes, setSelectedCodes] = useState<string[]>(['WH-001', 'WH-003']);

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

  const comboProps = plugins<CheckComboUIProps>(
    {
      data,
      value: selectedCodes,
      onChange: (nextCodes) => {
        setSelectedCodes(nextCodes);
      },
    },
    [
      createCheckComboPlaceholderPlugin('센터명을 검색하고 다중 선택하세요'),
      createCheckComboSortPlugin(),
    ],
  );

  const selectedValues = data
    .filter((item) => selectedCodes.includes(item.code))
    .map((item) => item.value)
    .join(', ');

  return (
    <Card title="Check Combo Input Sample" extra={<Text code>samples/Sample.tsx</Text>}>
      <Paragraph>
        여러 항목을 체크박스 형태로 선택합니다. 실제 값은 <Text strong>code[]</Text>를
        유지하고, 검색과 표시 텍스트는 <Text strong>value</Text> 기준으로 동작합니다.
      </Paragraph>

      <Flex vertical gap="small">
        <CheckComboUI {...comboProps} />
        <Text>선택 codes: {selectedCodes.join(', ') || '-'}</Text>
        <Text>선택 values: {selectedValues || '-'}</Text>
      </Flex>
    </Card>
  );
}
