"use strict";

import { Fragment, useState } from "react";
import { StyleSheet, Text, View } from "react-native";
import Animated from "react-native-reanimated";
import { useIOTheme } from "../../context";
import { IOColors, IOSpacing, IOVisualCostants, buttonSolidHeight, hexToRgba } from "../../core";
import { IOButton } from "../buttons";
import { VSpacer } from "./Spacer";
import { useBottomMargins } from "./hooks/useBottomMargins";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
/* Margin between `solid` and `variant` variant */
const spaceBetweenActions = 16;
/* Margin between `solid` and `link` variant */
const spaceBetweenActionAndLink = 16;
const styles = StyleSheet.create({
  buttonContainer: {
    paddingHorizontal: IOVisualCostants.appMarginDefault,
    width: "100%",
    flexShrink: 0
  },
  debugText: {
    position: "absolute",
    right: 8,
    top: -16,
    color: IOColors.black,
    fontSize: 9,
    opacity: 0.75
  },
  blockShadow: {
    shadowColor: IOColors.black,
    shadowOffset: {
      width: 0,
      height: -4
    },
    shadowOpacity: 0.1,
    shadowRadius: 32
  }
});
export const FooterActions = ({
  actions,
  excludeSafeAreaMargins = false,
  animatedStyles,
  fixed = true,
  transparent = false,
  onMeasure,
  testID,
  debugMode = false
}) => {
  const theme = useIOTheme();
  const {
    bottomMargin,
    extraBottomMargin
  } = useBottomMargins(!!actions?.secondary, excludeSafeAreaMargins);

  /* Total height of actions */
  const [actionBlockHeight, setActionBlockHeight] = useState(0);

  /* Background color should be app main background
     (both light and dark themes) */
  const HEADER_BG_COLOR = IOColors[theme["appBackground-primary"]];
  const TRANSPARENT_BG_COLOR = "transparent";

  /* Safe background block. Cover everything until it reaches
     the half of the primary action button. It avoids
     glitchy behavior underneath.  */
  const safeBackgroundBlockHeight = bottomMargin + actionBlockHeight - buttonSolidHeight / 2;
  const getActionBlockMeasurements = event => {
    const {
      height
    } = event.nativeEvent.layout;
    setActionBlockHeight(height);
    /* Height of the safe bottom area, applied to the ScrollView:
       Actions + Content end margin */
    const safeBottomAreaHeight = bottomMargin + height + IOSpacing.screenEndMargin;
    onMeasure?.({
      actionBlockHeight: height,
      safeBottomAreaHeight
    });
  };
  return /*#__PURE__*/_jsxs(Animated.View, {
    style: [{
      width: "100%",
      paddingBottom: bottomMargin
    }, fixed ? {
      position: "absolute",
      bottom: 0
    } : {
      marginTop: IOSpacing.screenEndMargin
    }, debugMode && {
      backgroundColor: hexToRgba(IOColors["error-500"], 0.15)
    }, animatedStyles?.mainBlock],
    testID: testID,
    children: [/*#__PURE__*/_jsx(Animated.View, {
      style: [{
        ...(fixed && {
          width: "100%",
          height: safeBackgroundBlockHeight,
          position: "absolute",
          bottom: 0,
          backgroundColor: transparent ? TRANSPARENT_BG_COLOR : HEADER_BG_COLOR
        }),
        ...(fixed ? styles.blockShadow : null)
      }, animatedStyles?.background],
      pointerEvents: "none"
    }), /*#__PURE__*/_jsxs(View, {
      style: styles.buttonContainer,
      onLayout: getActionBlockMeasurements,
      pointerEvents: "box-none",
      children: [debugMode && /*#__PURE__*/_jsx(Text, {
        style: styles.debugText,
        children: `Height: ${actionBlockHeight}`
      }), renderActions(actions, extraBottomMargin)]
    })]
  });
};
const renderActions = (actions, extraBottomMargin) => {
  if (!actions) {
    return null;
  }
  const {
    type,
    primary: primaryAction,
    secondary: secondaryAction,
    tertiary: tertiaryAction
  } = actions;
  return /*#__PURE__*/_jsxs(Fragment, {
    children: [primaryAction && /*#__PURE__*/_jsx(IOButton, {
      variant: "solid",
      fullWidth: true,
      ...primaryAction
    }), type === "TwoButtons" && secondaryAction && /*#__PURE__*/_jsxs(View, {
      style: {
        alignSelf: "center",
        marginBottom: extraBottomMargin
      },
      children: [/*#__PURE__*/_jsx(VSpacer, {
        size: spaceBetweenActionAndLink
      }), /*#__PURE__*/_jsx(IOButton, {
        variant: "link",
        ...secondaryAction
      })]
    }), type === "ThreeButtons" && /*#__PURE__*/_jsxs(_Fragment, {
      children: [secondaryAction && /*#__PURE__*/_jsxs(_Fragment, {
        children: [/*#__PURE__*/_jsx(VSpacer, {
          size: spaceBetweenActions
        }), /*#__PURE__*/_jsx(IOButton, {
          variant: "outline",
          fullWidth: true,
          ...secondaryAction
        })]
      }), tertiaryAction && /*#__PURE__*/_jsxs(View, {
        style: {
          alignSelf: "center",
          marginBottom: extraBottomMargin
        },
        children: [/*#__PURE__*/_jsx(VSpacer, {
          size: spaceBetweenActionAndLink
        }), /*#__PURE__*/_jsx(IOButton, {
          variant: "link",
          ...tertiaryAction
        })]
      })]
    })]
  });
};
//# sourceMappingURL=FooterActions.js.map