import type { ReactNode } from 'react';
import { StyleSheet, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { m3Colors, spacing } from '../theme/proulr-theme';
import { ComposeToolbarIcon } from './compose-toolbar-icon';

const TOOLBAR_ICON_SIZE = 48;

export function ComposeToolbar({
  children,
  bottomInset = 0,
  inline = false,
}: {
  children: ReactNode;
  bottomInset?: number;
  inline?: boolean;
}) {
  const insets = useSafeAreaInsets();
  const padBottom = inline ? Math.max(insets.bottom, bottomInset) + spacing.xs : bottomInset;

  return (
    <View
      style={[styles.toolbar, inline && styles.toolbarInline, { paddingBottom: padBottom }]}
      pointerEvents="box-none"
    >
      {children}
    </View>
  );
}

export { ComposeToolbarIcon };

const styles = StyleSheet.create({
  toolbar: {
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0,
    flexDirection: 'row',
    alignItems: 'center',
    gap: spacing.xs,
    paddingHorizontal: spacing.md,
    paddingTop: spacing.sm,
    borderTopWidth: StyleSheet.hairlineWidth,
    borderTopColor: m3Colors.outlineVariant,
    backgroundColor: m3Colors.surface,
    zIndex: 2,
  },
  toolbarInline: {
    position: 'relative',
    left: undefined,
    right: undefined,
    bottom: undefined,
  },
});

export const COMPOSE_TOOLBAR_ICON_SIZE = TOOLBAR_ICON_SIZE;