import React from "react";
import { View } from "react-native";
import * as R from "ramda";
import { useFilterChildren, insertBetween } from "../../../utils";
import type {
  HorizontalSeparatorProps,
  ContainerProps,
  ContainerChildren,
} from "./types";
import {
  useIsRTL,
  applyRTLStylesIfNeeded,
} from "@applicaster/zapp-react-native-utils/localizationUtils";

const HorizontalSeparator = ({ width }: HorizontalSeparatorProps) => (
  <View style={{ width }} />
);

export function ButtonContainerView({
  style,
  children,
  ...otherProps
}: ContainerProps) {
  const isRTL = useIsRTL();
  const horizontalGutter = R.pathOr(0, ["horizontalGutter"], otherProps);

  const filteredChildren = useFilterChildren<ContainerChildren>(children);

  if (R.isEmpty(filteredChildren)) {
    return null;
  }

  return (
    <View style={applyRTLStylesIfNeeded(style, isRTL)}>
      {insertBetween(
        (index) => (
          <HorizontalSeparator
            key={`separator_${index}`}
            width={horizontalGutter}
          />
        ),
        filteredChildren
      )}
    </View>
  );
}