import React from 'react';
import { ExtendedForm } from '../src/ExtendedForm';
import { RJSFSchema, UiSchema } from '@rjsf/utils';
import { useConditionalUi, UiRule } from '../src/conditionals/v2';

const schema: RJSFSchema = {
  type: 'object',
  properties: {
    requiresShipping: {
      type: 'boolean',
      title: 'Requires Shipping?'
    },
    shippingAddress: {
      type: 'object',
      title: 'Shipping Address',
      properties: {
        street: { type: 'string', title: 'Street' },
        city: { type: 'string', title: 'City' },
        zip: { type: 'string', title: 'ZIP Code' }
      }
    }
  }
};

const baseUiSchema: UiSchema = {
  requiresShipping: {
    'ui:widget': 'checkbox'
  },
  shippingAddress: {
    street: { 'ui:widget': 'text' },
    city: { 'ui:widget': 'text' },
    zip: { 'ui:widget': 'text' }
  }
};

export function ConditionalV2Example() {
  const [formData, setFormData] = React.useState({});

  // Define UI rules
  const uiRules: UiRule[] = [
    {
      name: 'Hide shipping address when not required',
      condition: (data) => !data.requiresShipping,
      effect: [
        { op: 'add', path: '/shippingAddress/ui:widget', value: 'hidden' }
      ]
    }
  ];

  // Apply conditional UI logic
  const conditionalUiSchema = useConditionalUi(uiRules, baseUiSchema, formData);

  return (
    <div>
      <h1>Conditional V2 Example - Three Pillars Architecture</h1>
      <ExtendedForm
        schema={schema}
        uiSchema={conditionalUiSchema}
        formData={formData}
        onChange={({ formData }) => setFormData(formData)}
      />
    </div>
  );
}