import React from 'react';
import EnumsEditor from './EnumsEditor';
import TemplateSelector from './TemplateSelector';
import { Label, Textarea } from '../ui/input';

const SELECT_CLASS =
    "flex h-9 w-full rounded-md border border-input bg-background/60 px-3 py-1 text-sm text-foreground transition-colors focus-visible:outline-none focus-visible:border-primary/60 focus-visible:ring-2 focus-visible:ring-ring/40";

const TypeEditor = ({ type, onChange }) => {
    const [_type, setType] = React.useState(type || {});

    const updateType = (updated) => {
        setType(updated);
        onChange(updated);
    };

    const renderExtraFields = () => {
        switch (_type.base_type) {
            case 'enum':
                return (
                    <div className="space-y-2">
                        <Label>Enums</Label>
                        <EnumsEditor
                            enums={_type.definition.enums}
                            onChange={(newEnums) => {
                                updateType({
                                    ..._type,
                                    definition: { ..._type.definition, enums: newEnums },
                                });
                            }}
                        />
                    </div>
                );

            case 'list':
                return (
                    <div className="space-y-4 rounded-md border border-border bg-background/40 p-4">
                        <div className="space-y-2">
                            <Label>Extend Type</Label>
                            <TypeEditor
                                type={_type.extend_type}
                                onChange={(extendType) => {
                                    updateType({ ..._type, extend_type: extendType });
                                }}
                            />
                        </div>

                        <div className="space-y-2">
                            <Label>Iter Layout</Label>
                            <Textarea
                                className="font-mono text-sm"
                                value={_type.definition.iter_layout || ''}
                                onChange={(e) => {
                                    updateType({
                                        ..._type,
                                        definition: {
                                            ..._type.definition,
                                            iter_layout: e.target.value,
                                        },
                                    });
                                }}
                            />
                        </div>
                    </div>
                );

            case 'template':
                return (
                    <TemplateSelector
                        template={_type.definition.template}
                        onChange={(newTemplate) => {
                            updateType({
                                ..._type,
                                definition: {
                                    ..._type.definition,
                                    template: newTemplate,
                                },
                            });
                        }}
                    />
                );

            default:
                return null;
        }
    };

    return (
        <div className="space-y-4 rounded-md border border-border bg-surface/40 p-4">
            <select
                className={SELECT_CLASS}
                value={_type.base_type || ''}
                onChange={(e) => {
                    const updated = { base_type: e.target.value, definition: {} };
                    updateType(updated);
                }}
            >
                <option value="string">string</option>
                <option value="markdown">markdown</option>
                <option value="enum">enum</option>
                <option value="list">list</option>
                <option value="template">template</option>
            </select>
            {renderExtraFields()}
        </div>
    );
};

export default TypeEditor;
