import { Pressable, StyleSheet, Text, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { fonts, m3Colors, m3Type, spacing } from '../theme/proulr-theme';
import { AppIcon } from './app-icon';
import { StorySettingsGlyph } from './story-glyphs';

export function StoryComposeHeader({
  title,
  onClose,
  onSettings,
}: {
  title: string;
  onClose: () => void;
  onSettings?: () => void;
}) {
  const insets = useSafeAreaInsets();

  return (
    <View style={[styles.header, { paddingTop: insets.top + spacing.xs }]}>
      <Pressable
        onPress={onClose}
        hitSlop={10}
        accessibilityRole="button"
        accessibilityLabel="Fechar"
        style={styles.sideBtn}
      >
        <AppIcon name="close" color={m3Colors.onSurface} size={18} />
      </Pressable>

      <Text style={styles.title} numberOfLines={1}>
        {title}
      </Text>

      {onSettings ? (
        <Pressable
          onPress={onSettings}
          hitSlop={10}
          accessibilityRole="button"
          accessibilityLabel="Configurações do story"
          style={styles.sideBtn}
        >
          <StorySettingsGlyph />
        </Pressable>
      ) : (
        <View style={styles.sideBtn} />
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: spacing.md,
    paddingBottom: spacing.sm,
    backgroundColor: m3Colors.surface,
  },
  sideBtn: {
    width: 40,
    height: 40,
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    flex: 1,
    color: m3Colors.onSurface,
    ...m3Type.titleSmall,
    textAlign: 'center',
    fontFamily: fonts.bold,
  },
});