import React from 'react';
import { StyleSheet, View as ReactNativeView, type ViewStyle } from 'react-native';
import { SafeAreaInsetsContext } from 'react-native-safe-area-context';

import type { AppBarProps } from '../../../../types/app-bar';
import { Divider, View } from '../../../layout/public';
import { useTheme } from '../../../theme/runtime';

/*** Renders application chrome with optional safe-area padding and leading/trailing slots. */
export function AppBar({
  leading,
  trailing,
  children,
  safeAreaTop = true,
  divider = false,
  contentStyle,
  bg,
  style,
  ...props
}: AppBarProps) {
  const { theme } = useTheme();
  const insets = React.use(SafeAreaInsetsContext);
  const topInset = safeAreaTop ? (insets?.top ?? 0) : 0;
  const safeAreaStyle: ViewStyle | undefined =
    topInset === 0 ? undefined : { paddingTop: topInset };

  return (
    <View {...props} bg={bg ?? theme.semantics.surface.default} style={style}>
      <ReactNativeView style={safeAreaStyle}>
        <ReactNativeView
          style={[styles.content, resolveHorizontalPadding(theme.spacing.m), contentStyle]}
        >
          {leading ? (
            <ReactNativeView
              style={[styles.accessory, resolveAccessoryMargin(theme.spacing.s, 'leading')]}
            >
              {leading}
            </ReactNativeView>
          ) : null}
          <ReactNativeView style={styles.center}>{children}</ReactNativeView>
          {trailing ? (
            <ReactNativeView
              style={[styles.accessory, resolveAccessoryMargin(theme.spacing.s, 'trailing')]}
            >
              {trailing}
            </ReactNativeView>
          ) : null}
        </ReactNativeView>
        {divider ? <Divider color={theme.semantics.neutral.divider} thickness={1} /> : null}
      </ReactNativeView>
    </View>
  );
}

/*** Resolves dynamic horizontal padding for the AppBar content row. */
function resolveHorizontalPadding(paddingHorizontal: number): ViewStyle {
  return { paddingHorizontal };
}

/*** Resolves directional spacing for one AppBar accessory. */
function resolveAccessoryMargin(spacing: number, position: 'leading' | 'trailing'): ViewStyle {
  return position === 'leading' ? { marginRight: spacing } : { marginLeft: spacing };
}

const styles = StyleSheet.create({
  accessory: { flexShrink: 0 },
  center: { flex: 1, minWidth: 0 },
  content: { alignItems: 'center', flexDirection: 'row', minHeight: 56 },
});