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

const { Paragraph, Text } = Typography;

export const sampleMeta: SampleMeta = {
  id: 'button-editable-input',
  componentId: 'button-editable-input',
  title: 'Button Editable Input',
  description:
    '기본적으로 readonly 상태를 유지하다가 버튼 클릭 시에만 편집할 수 있고, 유효하지 않으면 이전 값으로 복원되는 입력 샘플입니다.',
  category: 'Inputs',
  kind: 'feature',
  variantLabel: 'Showcase',
  order: 50,
  features: ['docs'],
};

export function Sample() {
  const [postalCode, setPostalCode] = useState('04524');

  return (
    <Card title="Button Editable Input Sample" extra={<Text code>samples/Sample.tsx</Text>}>
      <Paragraph>
        버튼을 눌러 편집을 활성화하고, <Text strong>5자리 숫자</Text>일 때만 값이 확정됩니다.
      </Paragraph>

      <Flex vertical gap="small">
        <ButtonEditableInputUI
          value={postalCode}
          placeholder="우편번호 5자리"
          onValid={({ nextValue }) => /^\d{5}$/.test(nextValue)}
          onChange={(event) => {
            setPostalCode(event.target.value);
          }}
        />
        <Text>확정 우편번호: {postalCode}</Text>
        <Text type="secondary">유효하지 않으면 이전 값으로 되돌아가고 다시 readonly 상태가 됩니다.</Text>
      </Flex>
    </Card>
  );
}
