import React from "react";
import { StyleSheet, View } from "react-native";

import { Handle, HandleProps } from "./Handle";
import { DraggableBottomSheet } from "./DraggableBottomSheet";

type Props = {
  children: React.ReactChild;
  backgroundColor: string;
  cornerRadius: number;
  contentHeight: number;
  maxHeight: number;
  maxWidth: number;
  visible: boolean;
  handleProps: HandleProps;
  closeToast: () => void;
  dimensions: { width: number; height: number };
  paddingBottom: number;
};

const styles = StyleSheet.create({
  toastFrameContainer: {
    width: "100%",
    alignSelf: "center",
  },
});

export function ModalBottomSheetFrame(props: Props) {
  const {
    children,
    backgroundColor,
    cornerRadius,
    maxHeight,
    maxWidth,
    visible,
    handleProps,
    contentHeight,
    dimensions,
    paddingBottom,
  } = props;

  const extraStyles = {
    backgroundColor,
    borderTopLeftRadius: cornerRadius,
    borderTopRightRadius: cornerRadius,
    maxHeight,
    paddingBottom,
    maxWidth: Math.min(Number(maxWidth), dimensions.width),
  };

  return (
    <DraggableBottomSheet
      sheetHeight={contentHeight}
      visible={visible}
      dismiss={props.closeToast}
      hasHeader={handleProps.enabled}
      header={(dragging) => <Handle {...handleProps} focused={dragging} />}
      maxWidth={maxWidth}
      {...dimensions}
    >
      <View style={[styles.toastFrameContainer, extraStyles]}>{children}</View>
    </DraggableBottomSheet>
  );
}