import type { ReactNode } from 'react';
import { Platform, Pressable, StyleSheet, TextInput, TextInputProps, View } from 'react-native';
import { fonts, m3Colors, m3Shape, spacing } from '../theme/proulr-theme';

export function ComposeTextArea(props: TextInputProps) {
  return (
    <TextInput
      placeholder="O que está acontecendo?"
      placeholderTextColor={m3Colors.onSurfaceVariant}
      multiline
      style={[styles.input, Platform.OS === 'web' ? styles.inputWeb : null]}
      {...(Platform.OS === 'android' ? { includeFontPadding: false } : {})}
      {...props}
    />
  );
}

export function ComposeMediaPreviewFrame({
  children,
  onRemove,
}: {
  children: ReactNode;
  onRemove: () => void;
}) {
  return (
    <View style={styles.previewWrap}>
      <View style={styles.preview}>{children}</View>
      <Pressable
        onPress={onRemove}
        accessibilityRole="button"
        accessibilityLabel="Remover mídia"
        style={styles.previewRemove}
      >
        <ComposeRemoveGlyph />
      </Pressable>
    </View>
  );
}

function ComposeRemoveGlyph() {
  return (
    <View style={styles.removeGlyph}>
      <View style={[styles.removeLine, { transform: [{ rotate: '45deg' }] }]} />
      <View style={[styles.removeLine, { transform: [{ rotate: '-45deg' }] }]} />
    </View>
  );
}

const styles = StyleSheet.create({
  input: {
    color: m3Colors.onSurface,
    fontFamily: fonts.regular,
    fontSize: 20,
    lineHeight: 28,
    minHeight: 120,
    textAlignVertical: 'top',
    paddingTop: spacing.xs,
  },
  // Samsung/Xiaomi force-dark can leave caret text black on OLED — lock fill color on web.
  inputWeb: {
    WebkitTextFillColor: m3Colors.onSurface,
    caretColor: m3Colors.onSurface,
    outlineStyle: 'none',
  } as object,
  previewWrap: {
    position: 'relative',
    marginTop: spacing.xs,
  },
  preview: {
    width: '100%',
    aspectRatio: 1,
    borderRadius: m3Shape.cornerLarge,
    backgroundColor: m3Colors.surfaceContainerHigh,
    overflow: 'hidden',
  },
  previewRemove: {
    position: 'absolute',
    top: spacing.sm,
    right: spacing.sm,
    width: 36,
    height: 36,
    borderRadius: 18,
    backgroundColor: m3Colors.scrim,
    alignItems: 'center',
    justifyContent: 'center',
  },
  removeGlyph: {
    width: 14,
    height: 14,
    alignItems: 'center',
    justifyContent: 'center',
  },
  removeLine: {
    position: 'absolute',
    width: 14,
    height: 2,
    borderRadius: 1,
    backgroundColor: m3Colors.onPrimary,
  },
});