import { Form } from 'antd';
import { useState } from 'react';
import type { SampleMeta } from '../../../widgets/core';
import { InputUI } from '../../inputs/primitives/input';
import { SelectUI } from '../../inputs/select';
import { FormField } from '../FormField';

const options = [
  { code: 'plan', value: 'Plan' },
  { code: 'board', value: 'Board' },
  { code: 'settings', value: 'Settings' },
];

export const sampleMeta: SampleMeta = {
  id: 'form-field-base',
  componentId: 'form-field',
  title: 'Form Field Wrapper',
  description: 'label, required, help, error, disabled 상태를 입력 컴포넌트 앞단에서 통일하는 필드 래퍼입니다.',
  category: 'Common',
  kind: 'base',
  variantLabel: 'Base',
  order: 30,
  features: ['docs', 'component-sample'],
};

export function Sample() {
  const [title, setTitle] = useState('');
  const error = title.trim() ? undefined : '제목을 입력하세요.';

  return (
    <Form layout="vertical">
      <FormField label="게시글 제목" required help="저장 전 검증 메시지를 같은 위치에 표시합니다." error={error}>
        <InputUI
          value={title}
          placeholder="제목 입력"
          onChange={(event) => {
            setTitle(event.target.value);
          }}
        />
      </FormField>
      <FormField label="연결 화면">
        <SelectUI data={options} defaultValue="plan" />
      </FormField>
      <FormField label="잠긴 필드" disabled>
        <InputUI defaultValue="자동화 접수 후 수정할 수 없습니다." />
      </FormField>
    </Form>
  );
}
