import { Card, Flex, Typography } from 'antd';
import { useState } from 'react';
import type { SampleMeta } from '../../../../../widgets/core';
import { InputUI } from '../InputUI';

const { Paragraph, Text } = Typography;

export const sampleMeta: SampleMeta = {
  id: 'deferred-input',
  componentId: 'input',
  title: 'Base Input',
  description: '입력 중에는 draft 상태만 유지하고 Enter 또는 blur 시점에만 값을 확정하는 기본형 InputUI 샘플입니다.',
  category: 'Inputs',
  kind: 'feature',
  variantLabel: 'Showcase',
  order: 20,
  features: ['docs'],
};

export function Sample() {
  const [committedValue, setCommittedValue] = useState('초기값');
  const [commitCount, setCommitCount] = useState(0);

  return (
    <Card title="Base Input Sample" extra={<Text code>samples/Sample.tsx</Text>}>
      <Paragraph>
        입력 중에는 내부 값만 바뀌고, <Text strong>Enter</Text> 또는 <Text strong>blur</Text>{' '}
        시점에만 외부 값이 갱신됩니다.
      </Paragraph>

      <Flex vertical gap="small">
        <InputUI
          placeholder="입력 후 Enter 또는 blur"
          value={committedValue}
          onChange={(event) => {
            setCommittedValue(event.target.value);
            setCommitCount((count) => count + 1);
          }}
        />
        <Text>확정 값: {committedValue}</Text>
        <Text type="secondary">{`확정 횟수: ${commitCount}`}</Text>
      </Flex>
    </Card>
  );
}

export const InputSample = Sample;
