'use client';

import React from 'react';

import { Combobox } from '@djangocfg/ui-core/components';

import type { SchemaSource } from '../../../types';
import { MethodChips } from './MethodChips';
import { SearchInput } from './SearchInput';
import type { MethodFilter } from './types';

interface ToolbarProps {
    schemas: SchemaSource[];
    currentSchemaId: string | null;
    onSchemaChange: (id: string) => void;
    showSchemaSelector: boolean;

    search: string;
    onSearchChange: (v: string) => void;

    methodFilter: MethodFilter;
    onMethodFilterChange: (v: MethodFilter) => void;
}

/** Filter / control panel of the sidebar. Groups the schema selector,
 *  search box, and HTTP method chips into a single visually cohesive
 *  block so they read as "one toolbar" rather than three separate
 *  affordances stacked on top of each other.
 *
 *  Each row is optional in the sense that we only render the schema
 *  selector when there are multiple schemas to choose between. */
export function Toolbar({
    schemas,
    currentSchemaId,
    onSchemaChange,
    showSchemaSelector,
    search,
    onSearchChange,
    methodFilter,
    onMethodFilterChange,
}: ToolbarProps) {
    const schemaOptions = React.useMemo(
        () => schemas.map((s) => ({ value: s.id, label: s.name })),
        [schemas],
    );

    return (
        <div className="shrink-0 border-b px-3 py-2.5 space-y-2">
            {showSchemaSelector && (
                <Combobox
                    options={schemaOptions}
                    value={currentSchemaId ?? ''}
                    onValueChange={(id) => id && onSchemaChange(id)}
                    placeholder="Select API"
                    searchPlaceholder="Search APIs…"
                    emptyText="No APIs found"
                    className="w-full h-8 text-xs"
                />
            )}
            <SearchInput value={search} onChange={onSearchChange} />
            <MethodChips value={methodFilter} onChange={onMethodFilterChange} />
        </div>
    );
}
