import React, { useMemo } from 'react';
import Reanimated, { Extrapolation, interpolate, useAnimatedStyle } from 'react-native-reanimated';
import { extendObject } from '../utils';
import { createFaces } from './pickerViewFaces';
import { usePickerViewColumnAnimationContext, usePickerViewStyleContext } from '../mpx-picker-view/pickerVIewContext';
const PickerViewColumnItem = ({ item, index, itemHeight, itemWidth = '100%', textStyle, textProps, visibleCount, onItemLayout }) => {
    const textStyleFromAncestor = usePickerViewStyleContext();
    const offsetYShared = usePickerViewColumnAnimationContext();
    const facesShared = useMemo(() => createFaces(itemHeight, visibleCount), [itemHeight, visibleCount]);
    const animatedStyles = useAnimatedStyle(() => {
        const inputRange = facesShared.map((f) => itemHeight * (index + f.index));
        return {
            opacity: interpolate(offsetYShared.value, inputRange, facesShared.map((x) => x.opacity), Extrapolation.CLAMP),
            transform: [
                { translateY: interpolate(offsetYShared.value, inputRange, facesShared.map((x) => x.offsetY), Extrapolation.EXTEND) },
                { rotateX: interpolate(offsetYShared.value, inputRange, facesShared.map((x) => x.deg), Extrapolation.CLAMP) + 'deg' },
                { scale: interpolate(offsetYShared.value, inputRange, facesShared.map((x) => x.scale), Extrapolation.EXTEND) }
            ]
        };
    });
    const strKey = `picker-column-item-${index}`;
    const restProps = index === 0 ? { onLayout: onItemLayout } : {};
    const itemProps = extendObject({
        style: extendObject({ height: itemHeight, width: '100%' }, textStyleFromAncestor, textStyle, item.props.style)
    }, textProps, restProps);
    const realItem = React.cloneElement(item, itemProps);
    return (<Reanimated.View key={strKey} style={[
            { height: itemHeight, width: itemWidth, pointerEvents: 'none' },
            animatedStyles
        ]}>
        {realItem}
    </Reanimated.View>);
};
PickerViewColumnItem.displayName = 'MpxPickerViewColumnItem';
export default PickerViewColumnItem;