import { defineStory, useSelect, useBoolean } from '@djangocfg/playground';
import { JsonSchemaForm } from './index';

export default defineStory({
  title: 'Tools/Json Schema Form',
  component: JsonSchemaForm,
  description: 'Dynamic form generator from JSON Schema using react-jsonschema-form.',
});

const SCHEMAS = {
  simple: {
    schema: {
      type: 'object' as const,
      required: ['name', 'email'],
      properties: {
        name: { type: 'string' as const, title: 'Name' },
        email: { type: 'string' as const, title: 'Email', format: 'email' },
        age: { type: 'integer' as const, title: 'Age', minimum: 0, maximum: 120 },
      },
    },
    uiSchema: {},
  },
  vehicle: {
    schema: {
      type: 'object' as const,
      required: ['make', 'model', 'year'],
      properties: {
        make: {
          type: 'string' as const,
          title: 'Make',
          enum: ['BMW', 'Mercedes', 'Audi', 'Porsche', 'Tesla'],
        },
        model: { type: 'string' as const, title: 'Model' },
        year: { type: 'integer' as const, title: 'Year', minimum: 1990, maximum: 2025 },
        price: { type: 'number' as const, title: 'Price ($)' },
        features: {
          type: 'array' as const,
          title: 'Features',
          items: {
            type: 'string' as const,
            enum: ['Leather', 'Navigation', 'Sunroof', 'Heated Seats', 'Parking Sensors'],
          },
          uniqueItems: true,
        },
        description: { type: 'string' as const, title: 'Description' },
      },
    },
    uiSchema: {
      description: { 'ui:widget': 'textarea' },
      features: { 'ui:widget': 'checkboxes' },
    },
  },
  contact: {
    schema: {
      type: 'object' as const,
      required: ['firstName', 'lastName', 'email'],
      properties: {
        firstName: { type: 'string' as const, title: 'First Name' },
        lastName: { type: 'string' as const, title: 'Last Name' },
        email: { type: 'string' as const, title: 'Email', format: 'email' },
        phone: { type: 'string' as const, title: 'Phone' },
        message: { type: 'string' as const, title: 'Message' },
        subscribe: { type: 'boolean' as const, title: 'Subscribe to newsletter' },
      },
    },
    uiSchema: {
      message: { 'ui:widget': 'textarea' },
    },
  },
};

export const Interactive = () => {
  const [schemaType] = useSelect('schemaType', {
    options: ['simple', 'vehicle', 'contact'] as const,
    defaultValue: 'vehicle',
    label: 'Schema Type',
    description: 'Select form schema',
  });

  const [liveValidate] = useBoolean('liveValidate', {
    defaultValue: false,
    label: 'Live Validate',
    description: 'Validate on every change',
  });

  const config = SCHEMAS[schemaType];

  return (
    <div className="max-w-lg">
      <JsonSchemaForm
        schema={config.schema}
        uiSchema={config.uiSchema}
        liveValidate={liveValidate}
        onSubmit={(data) => console.log('Submitted:', data.formData)}
      />
    </div>
  );
};

export const SimpleForm = () => (
  <div className="max-w-md">
    <JsonSchemaForm
      schema={SCHEMAS.simple.schema}
      onSubmit={(data) => console.log('Submitted:', data.formData)}
    />
  </div>
);

export const VehicleForm = () => (
  <div className="max-w-lg">
    <JsonSchemaForm
      schema={SCHEMAS.vehicle.schema}
      uiSchema={SCHEMAS.vehicle.uiSchema}
      onSubmit={(data) => console.log('Submitted:', data.formData)}
    />
  </div>
);

export const WithDefaultValues = () => (
  <div className="max-w-lg">
    <JsonSchemaForm
      schema={SCHEMAS.vehicle.schema}
      uiSchema={SCHEMAS.vehicle.uiSchema}
      formData={{
        make: 'BMW',
        model: 'X5',
        year: 2023,
        price: 65000,
        features: ['Leather', 'Navigation'],
      }}
      onSubmit={(data) => console.log('Submitted:', data.formData)}
    />
  </div>
);
