import React from 'react';
import { View } from 'react-native';
import type { SharedValue } from 'react-native-reanimated';
import {
    Extrapolation,
    interpolate,
    useDerivedValue
} from 'react-native-reanimated';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { safeWithTheme, useTheme } from '../../branding';
import type { PageHeaderContent } from '../../componentsDS/PageHeader';
import PageHeader, {
    COLLAPSE_SCROLL_DISTANCE
} from '../../componentsDS/PageHeader';
import styles from './styles';

type ScreenPageHeaderProps = PageHeaderContent & {
    scrollY: SharedValue<number>;
};

const ScreenPageHeader = ({ scrollY, ...content }: ScreenPageHeaderProps) => {
    const { theme } = useTheme();
    const insets = useSafeAreaInsets();

    const progress = useDerivedValue(() =>
        interpolate(
            scrollY.value,
            [0, COLLAPSE_SCROLL_DISTANCE],
            [0, 1],
            Extrapolation.CLAMP
        )
    );

    return (
        <View style={[styles[theme].container, { paddingTop: insets.top }]}>
            <PageHeader progress={progress} {...content} />
        </View>
    );
};

export default safeWithTheme<ScreenPageHeaderProps>(ScreenPageHeader);