'use client';
import React from "react";
import { Input, TextArea, Checkbox, FieldLabel } from "@/components/ui";
import { List } from 'react-window';
import { useDeferredValue } from 'react';

// This is a separate component that renders ONE field (used by the List)
const FieldRow = ({ index, style, data }) => {

    const field = data[index];

    if (!field || !field.config) {
        return 
;
    } ;


    return (
        

            

            {/* Render appropriate input based on field type */}
            {['EMAIL', 'PHONE'].includes(field.type) && (
                
            )}

            {field.type === 'NUMBER' && (
                
            )}

            {field.type === 'SHORT_TEXT' && (
                
            )}

            {field.type === 'TEXTAREA' && (
                 {}}
                    placeholder={field.config.placeholder}
                    rows={3}
                    disabled
                />
            )}

            {field.type === 'DATE' && (
                <Input
                    type="date"
                    disabled
                    className="border border-gray-300 focus:ring-2 focus:ring-blue-500"
                />
            )}

            {field.type === 'CHECKBOX' && Array.isArray(field.config.options) && (
                <div className="space-y-2">
                    {field.config.options.map((option, idx) => (
                        <Checkbox
                            key={idx}
                            label={option}
                            disabled
                            checked={false}
                        />
                    ))}
                </div>
            )}
        </div>
    );
};

const LivePreview = ({ fields = []}) => {

    const safeFields = (fields || []).filter(Boolean);

    const deferredFields = useDeferredValue(safeFields);

    return (
        <aside className="w-96 bg-gray-100 border-l border-gray-200 p-6 overflow-y-auto">
            <div className="mb-4">
                <h2 className="text-lg font-bold text-gray-900 mb-2">Preview</h2>
                <p className="text-sm text-gray-500">Live preview of your form</p>
            </div>

            <div className="bg-white rounded-lg shadow-sm p-6 border border-gray-200">
                {deferredFields.length === 0 ? (
                <p className="text-gray-400 text-center py-8">Add fields to see preview</p>
                ) : (
                    <List
                        height={600}               // Adjust to your preview container's height
                        itemCount={deferredFields.length}
                        itemSize={120}              // Approximate height of each field row (in pixels)
                        itemData={deferredFields}
                        width="100%"
                    >
                        {FieldRow}
                    </List>
                )}
            </div>
        </aside>
    );
};

export default React.memo(LivePreview);
</code></pre>

        </div>      </div>
      <div class="tags">
          
                  <span class="tag">javascript</span>
                <span class="tag">reactjs</span>
                <span class="tag">next.js</span>
                <span class="tag">open-source</span>
                <!--<span class="tag">Async</span>-->
        <!--<span class="tag">Promises</span>-->
      </div>
    </div>
    
    
    
<!-- Add Answer (only visible if logged in) -->
    <div id="addAnswerSection" class="add-answer" style="display: none;">
      <h4>Your Answer</h4>
      <form>
        <div class="mdl-textfield mdl-js-textfield">
          <textarea
            class="mdl-textfield__input"
            rows="4"
            id="answer"
          >
          Write your answer...
        
        
          Submit Answer
        
      
    
    


    

      lock_outline
      
You need to log in to submit an answer.
      
        Log In