import { Card, Flex, Typography } from 'antd';
import { useState } from 'react';
import type { SampleMeta } from '../../../../widgets/core';
import { plugins } from '../../../../types/component-plugin';
import { createPopupButtonTextPlugin, createPopupResultPlaceholderPlugin } from '../plugins';
import { PopupUI } from '../PopupUI';
import type { PopupUIProps } from '../types';

const { Paragraph, Text } = Typography;

export const sampleMeta: SampleMeta = {
  id: 'popup-input',
  componentId: 'popup-input',
  title: 'Popup Input',
  description: '[input][button][readonly input] 형태의 popup input 샘플입니다.',
  category: 'Inputs',
  kind: 'feature',
  variantLabel: 'Showcase',
  order: 40,
  features: ['docs'],
};

export function Sample() {
  const [keyword, setKeyword] = useState('납품처');
  const [result, setResult] = useState('서울 물류센터');

  const popupProps = plugins<PopupUIProps>(
    {
      type: 'search',
      value: keyword,
      resultValue: result,
      inputPlaceholder: '검색어 입력',
      onChange: (event) => {
        setKeyword(event.target.value);
      },
      onButtonClick: () => {
        setResult(keyword ? `${keyword} 선택 결과` : '선택 결과 없음');
      },
    },
    [
      createPopupButtonTextPlugin('팝업'),
      createPopupResultPlaceholderPlugin('팝업 선택값'),
    ],
  );

  return (
    <Card title="Popup Input Sample" extra={<Text code>samples/Sample.tsx</Text>}>
      <Paragraph>
        검색 타입 popup input 샘플입니다. 첫 번째 input에 검색어를 입력하고 돋보기 버튼을 누르면,
        마지막 readonly input에 선택 결과를 표시합니다.
      </Paragraph>

      <Flex vertical gap="small">
        <PopupUI {...popupProps} />
        <Text>검색 값: {keyword}</Text>
        <Text>선택 값: {result}</Text>
      </Flex>
    </Card>
  );
}
