import React, {FC} from "react";
import {TestableData} from "./store";
import {ColorOptionWithCustomTint} from "./Color";
import {CardItem, CardItemProps} from "./CardItem";
import {useCardRenderer} from "./hooks";

export type ContextCardItemProps = Pick<CardItemProps, 'position'|'dynamicRemoveButton'|'topConnectorMarker'|'topConnectorMarkerCenterOffset'|'onMeasuredHeightChange'> & ColorOptionWithCustomTint & {
    id: TestableData['id'],
    data?: TestableData,
    onClick?: (id: ContextCardItemProps['id']) => void,
    onRemoveClick?: (id: ContextCardItemProps['id']) => void,
    active?: boolean,
}

export const ContextCardItem: FC<ContextCardItemProps> = ({
                                                              id,
                                                              data,
                                                              position,
                                                              color,
                                                              onClick,
                                                              active,
                                                              onRemoveClick,
                                                              dynamicRemoveButton,
                                                              topConnectorMarker,
                                                              topConnectorMarkerCenterOffset,
                                                              onMeasuredHeightChange,
                                                            }) => {
    const cardRenderer = useCardRenderer(data ? data : id, 'testables')

    return <CardItem color={color}
                     position={position}
                     context={'testable'}
                     cardRenderer={cardRenderer}
                     onClick={onClick ? (() => onClick?.(id)) : undefined}
                     active={active}
                     onRemoveClick={onRemoveClick ? (() => onRemoveClick?.(id)) : undefined}
                     dynamicRemoveButton={dynamicRemoveButton}
                     topConnectorMarker={topConnectorMarker}
                     topConnectorMarkerCenterOffset={topConnectorMarkerCenterOffset}
                     onMeasuredHeightChange={onMeasuredHeightChange}
    />
}