import { memo, type ReactNode } from "react";
import { StyleSheet, Text, View } from "react-native";
import { colors, monoFont } from "@/lib/theme";

export type Sender = "user" | "agent";

const SENDER_LABEL: Record<Sender, string> = {
  user: "you",
  agent: "pi",
};

const SENDER_COLOR: Record<Sender, string> = {
  user: colors.senderUser,
  agent: colors.senderAgent,
};

const RAIL_COLOR: Record<Sender, string> = {
  user: colors.railUser,
  agent: colors.railAgent,
};

type Props = {
  sender: Sender;
  /** Show the sender label (first message of a consecutive run). */
  groupStart: boolean;
  children: ReactNode;
};

function MessageRowComponent({ sender, groupStart, children }: Props) {
  return (
    <View
      style={[
        styles.container,
        { borderLeftColor: RAIL_COLOR[sender] },
        groupStart && styles.groupStart,
      ]}
    >
      {groupStart ? (
        <Text style={[styles.sender, { color: SENDER_COLOR[sender] }]}>
          {SENDER_LABEL[sender]}
        </Text>
      ) : null}
      {children}
    </View>
  );
}

export const MessageRow = memo(MessageRowComponent);

const styles = StyleSheet.create({
  container: {
    borderLeftWidth: 2,
    paddingLeft: 12,
    paddingRight: 4,
    paddingVertical: 3,
  },
  groupStart: {
    marginTop: 18,
  },
  sender: {
    fontFamily: monoFont,
    fontSize: 11,
    fontWeight: "700",
    letterSpacing: 1.5,
    textTransform: "uppercase",
    marginBottom: 5,
  },
});