import { useState } from 'react';
import type { SampleMeta } from '../../../widgets/core';
import { QueryFilterBuilderUI } from '../QueryFilterBuilderUI';
import type { QueryFilterCondition } from '../types';

const fields = [
  { value: 'title', label: '제목', placeholder: '게시글 제목' },
  { value: 'status', label: '상태', placeholder: 'ready, working, done' },
  { value: 'owner', label: '담당 영역', placeholder: 'Plan, Board, History' },
];

const operators = [
  { value: 'contains', label: '포함' },
  { value: 'equals', label: '일치' },
  { value: 'startsWith', label: '시작' },
];

const initialValue: QueryFilterCondition[] = [
  { id: 'condition-title', field: 'title', operator: 'contains', value: '컴포넌트' },
  { id: 'condition-owner', field: 'owner', operator: 'equals', value: 'Plan' },
];

export const sampleMeta: SampleMeta = {
  id: 'query-filter-builder-base',
  componentId: 'query-filter-builder',
  title: 'Query Filter Builder',
  description: '복수 조건 검색 필터를 행 단위로 추가하고 프리셋으로 재사용하는 컴포넌트입니다.',
  category: 'Common',
  kind: 'base',
  variantLabel: 'Base',
  order: 45,
  features: ['docs', 'component-sample'],
};

export function Sample() {
  const [value, setValue] = useState<QueryFilterCondition[]>(initialValue);

  return (
    <QueryFilterBuilderUI
      fields={fields}
      operators={operators}
      value={value}
      onChange={setValue}
      presets={[
        {
          value: 'plan-open',
          label: 'Plan 진행 건',
          conditions: [
            { id: 'preset-status', field: 'status', operator: 'equals', value: 'working' },
            { id: 'preset-owner', field: 'owner', operator: 'equals', value: 'Plan' },
          ],
        },
      ]}
    />
  );
}
