import React, {FC} from "react";
import {ComponentRuntimeDataWithParentType} from "./tree/components";
import {__} from "./globals";
import {TestableListItem} from "./TestableListItem";
import {ComponentType, getComponentMeta} from "./tree/ComponentsMeta";
import {getCardRendererFromType} from "./tree/cards";

export type SelectedFiltersSidebarProps = {
    componentRuntimeData: ComponentRuntimeDataWithParentType[],
    parentType?: ComponentType
    onComponentSelect?: (type: string) => void,
    onComponentRemove?: (type: string) => void,
}

export const SelectedFiltersSidebar: FC<SelectedFiltersSidebarProps> = ({componentRuntimeData, onComponentSelect, onComponentRemove, parentType}) => {
    if (componentRuntimeData.length === 0) {
        return null;
    }
    const componentRuntimeDataWithoutBase = [...componentRuntimeData].filter((component) => {
        const cardRenderer = getCardRendererFromType(component.type);

        const canRenderInSidebar = cardRenderer.canRenderInSelectedSidebarPopup?.(component.options, component.type);

        if (typeof canRenderInSidebar === 'boolean') {
            return canRenderInSidebar;
        }

        return true
    });
    const baseComponentRuntimeData = componentRuntimeDataWithoutBase.shift()!

    return <div className="space-y-3">
        <h3 className="text-base text-gray-600">{parentType === 'filters'? __('Selected Filters') : __('Selected Conditions')}</h3>
        {[
            {
                type: __('Base'),
                components: [baseComponentRuntimeData]
            },
            {
                type: __('Extra'),
                components: componentRuntimeDataWithoutBase
            },
        ].map(({type, components}) => components.length ? <div className="space-y-1">
            <h4 className="text-smaller-1 text-gray-500 ml-4">{type}</h4>
            {components.map((component, index) => {
                const componentMeta = getComponentMeta(parentType ||  component.parentType, component.type);
                return <TestableListItem componentMeta={componentMeta}
                                         onSelect={() => {
                                             onComponentSelect?.(component.type)
                                         }}
                                         name="short"
                                         size="small"
                                         style="solid"
                                         rightContent={
                                            <div className="flex items-center">
                                                <button className="text-smaller-1 text-gray-500 flex items-center leading-3 mt-[2px]" onClick={() => onComponentRemove?.(component.type)}>
                                                    {__('Remove')}
                                                </button>
                                            </div>
                                         }
                        />;
            })}
        </div> : '')}
    </div>
}
