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

const { Paragraph, Text, Title } = Typography;

export const sampleMeta: SampleMeta = {
  id: 'valid-input',
  componentId: 'input',
  title: 'Valid Input',
  description: 'InputUI에 validation plugin을 추가해 유효할 때만 값을 확정하는 확장 샘플입니다.',
  category: 'Inputs',
  kind: 'plugin',
  variantLabel: 'Validation Plugin',
  order: 21,
  features: ['docs'],
};

export function Sample() {
  const [validValue, setValidValue] = useState('hello');
  const [uppercaseValue, setUppercaseValue] = useState('ABC');
  const minLengthPlugin = createValidInputPlugin(({ nextValue }) => nextValue.trim().length >= 3);
  const uppercasePlugin = createValidInputPlugin(({ nextValue }) => /^[A-Z]+$/.test(nextValue));

  return (
    <Card title="Validation Plugin Sample" extra={<Text code>samples/ValidInputSample.tsx</Text>}>
      <Paragraph>
        <Text strong>`InputUI`</Text> 하나만 사용하고, 검증은{' '}
        <Text strong>`createValidInputPlugin`</Text>으로 주입합니다.
      </Paragraph>

      <Flex vertical gap="small">
        <Title level={5}>Minimum Length Validation</Title>
        <InputUI
          placeholder="3글자 이상만 반영"
          value={validValue}
          commitPlugins={[minLengthPlugin]}
          onChange={(event) => {
            setValidValue(event.target.value);
          }}
        />
        <Text>유효성 통과 값: {validValue}</Text>
        <Text type="secondary">3글자 미만 입력은 이전 값으로 유지됩니다.</Text>

        <Divider />

        <Title level={5}>Uppercase Validation</Title>
        <InputUI
          placeholder="영문 대문자만 반영"
          value={uppercaseValue}
          commitPlugins={[uppercasePlugin]}
          onChange={(event) => {
            setUppercaseValue(event.target.value);
          }}
        />
        <Text>대문자 유효성 값: {uppercaseValue}</Text>
        <Text type="secondary">소문자, 숫자, 공백이 포함되면 이전 값으로 복원됩니다.</Text>
      </Flex>
    </Card>
  );
}
