import color from "color";
import { Animated } from "react-native";
import DarkTheme from "./DarkTheme";

export default function overlay(
    elevation: number | Animated.Value = 1,
    surfaceColor: string = DarkTheme.colors.surface
) {
    if (elevation instanceof Animated.Value) {
        const inputRange = [0, 1, 2, 3, 8, 24];
        return elevation.interpolate({
            inputRange,
            outputRange: inputRange.map((elevation) => {
                return calculateColor(surfaceColor, elevation);
            }),
        });
    }
    return calculateColor(surfaceColor, elevation);
}
function calculateColor(surfaceColor: string, elevation: number) {
    let overlayTransparency: number;
    if (elevation >= 1 && elevation <= 24) {
        overlayTransparency = elevationOverlayTransparency[elevation];
    } else if (elevation > 24) {
        overlayTransparency = elevationOverlayTransparency[24];
    } else {
        overlayTransparency = elevationOverlayTransparency[1];
    }
    return color(surfaceColor)
        .mix(color("white"), overlayTransparency * 0.01)
        .hex();
}
const elevationOverlayTransparency: { [id: number]: number } = {
    1: 5,
    2: 7,
    3: 8,
    4: 9,
    5: 10,
    6: 11,
    7: 11.5,
    8: 12,
    9: 12.5,
    10: 13,
    11: 13.5,
    12: 14,
    13: 14.25,
    14: 14.5,
    15: 14.75,
    16: 15,
    17: 15.12,
    18: 15.24,
    19: 15.36,
    20: 15.48,
    21: 15.6,
    22: 15.72,
    23: 15.84,
    24: 16,
};