import { StyleSheet, View, ViewStyle } from 'react-native'
import Svg, { Path } from 'react-native-svg'
import { useTheme } from '../../hooks'
import { MessageResource } from '../../types'
import {
  CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL,
  MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH,
} from '../../utils/styles'

const MY_REPLY_CONNECTOR_WIDTH = 38
const CONNECTOR_BORDER_WIDTH = 4
const OFFSET_CONNECTOR_CONTAINER = CONNECTOR_BORDER_WIDTH / 2 // Accounts for the border width ensuring the connectors are centered under the avatar
export const AVATAR_CONNECTOR_SPACING = 8

interface ReplyConnectorProps {
  message: MessageResource
  messageBubbleHeight: number
}

export function TheirReplyConnector({ message, messageBubbleHeight }: ReplyConnectorProps) {
  const styles = useStyles()
  const { nextRendersAuthor, threadPosition, renderAuthor, isReplyShadowMessage } = message

  if (messageBubbleHeight === 0) return null // Prevents UI shifting

  const connectorMap: Record<string, React.ReactNode | null> = {
    shortTailCurve: <ShortTailCurveConnector height={messageBubbleHeight / 2} />,
    shortHeadCurve: <ShortHeadCurveConnector height={messageBubbleHeight / 2} />,
    verticalLine: <VerticalLineConnector />,
    default: null,
  }

  const getConnectorKey = () => {
    if (threadPosition === 'first' && !renderAuthor) return 'shortHeadCurve'
    if (threadPosition === 'last' && !renderAuthor) return 'shortTailCurve'
    if (
      (threadPosition === 'first' && renderAuthor) ||
      threadPosition === 'center' ||
      isReplyShadowMessage
    )
      return 'verticalLine'
    return 'default'
  }

  const ConnectorComponent = connectorMap[getConnectorKey()]
  if (!ConnectorComponent) return null

  const spacerStyle = nextRendersAuthor ? styles.theirReplyConnectorSpacer : null

  return (
    <View style={[styles.theirReplyConnectorContainer, spacerStyle]}>{ConnectorComponent}</View>
  )
}

export function MyReplyConnector({ message, messageBubbleHeight }: ReplyConnectorProps) {
  const styles = useStyles()
  const { nextRendersAuthor, threadPosition, prevIsMyReply, nextIsMyReply, isReplyShadowMessage } =
    message

  if (messageBubbleHeight === 0) return null // Prevents UI shifting

  const connectorMap: Record<string, React.ReactNode | null> = {
    longTailCurve: (
      <LongTailCurveConnector
        height={messageBubbleHeight / 2}
        style={styles.myReplyConnectorPosition}
      />
    ),
    longHeadCurve: (
      <LongHeadCurveConnector
        height={messageBubbleHeight / 2}
        style={styles.myReplyConnectorPosition}
      />
    ),
    verticalLine: <VerticalLineConnector style={styles.myReplyConnectorPosition} />,
    swirl: <SwirlConnector style={styles.myReplyConnectorPosition} height={messageBubbleHeight} />,
    default: null,
  }

  const getConnectorKey = () => {
    if (threadPosition === 'first' || isReplyShadowMessage) return 'longHeadCurve'
    if (threadPosition === 'center' && prevIsMyReply && nextIsMyReply) return 'verticalLine'
    if (threadPosition === 'center' && (!prevIsMyReply || !nextIsMyReply)) return 'swirl'
    if (threadPosition === 'last') return 'longTailCurve'

    return 'default'
  }

  const ConnectorComponent = connectorMap[getConnectorKey()]
  if (!ConnectorComponent) return null

  const spacerStyle = nextRendersAuthor ? styles.myReplyConnectorSpacer : null

  return (
    <EnforceLeftPositionForMyReplyConnector>
      <View style={[styles.myReplyConnectorContainer, spacerStyle]}>{ConnectorComponent}</View>
    </EnforceLeftPositionForMyReplyConnector>
  )
}

function VerticalLineConnector({ style }: { style?: ViewStyle }) {
  const styles = useStyles()
  return <View style={[styles.verticalLineConnector, style]} />
}

function LongHeadCurveConnector({ height, style }: { height: number; style?: ViewStyle }) {
  const styles = useStyles()
  const { colors } = useTheme()

  return (
    <View style={[styles.longHeadCurveConnector, { marginTop: height }, style]}>
      <Svg width={MY_REPLY_CONNECTOR_WIDTH} height={18} fill="none">
        <Path
          d="M 2 18 L 2 16 A 14 14 0 0 1 16 2 L 38 2"
          stroke={colors.borderColorDefaultBase}
          strokeWidth={CONNECTOR_BORDER_WIDTH}
        />
      </Svg>
      <View style={styles.svgConnnectorVerticalLineTail} />
    </View>
  )
}

function LongTailCurveConnector({ height, style }: { height: number; style?: ViewStyle }) {
  const styles = useStyles()
  const { colors } = useTheme()

  return (
    <View style={[{ height }, style]}>
      <View style={styles.svgConnnectorVerticalLineHead} />
      <Svg width={MY_REPLY_CONNECTOR_WIDTH} height={18} fill="none">
        <Path
          d="M 2 0 L 2 2 A 14 14 0 0 0 16 16 L 38 16"
          stroke={colors.borderColorDefaultBase}
          strokeWidth={CONNECTOR_BORDER_WIDTH}
        />
      </Svg>
    </View>
  )
}

function ShortHeadCurveConnector({ height }: { height: number }) {
  const styles = useStyles()
  const { colors } = useTheme()

  return (
    <View style={[styles.shortHeadCurveConnector, { marginTop: height }]}>
      <Svg width={20} height={18} fill="none">
        <Path
          d="M 2 18 L 2 16 A 14 14 0 0 1 16 2 L 20 2"
          stroke={colors.borderColorDefaultBase}
          strokeWidth={CONNECTOR_BORDER_WIDTH}
        />
      </Svg>
      <View style={styles.svgConnnectorVerticalLineTail} />
    </View>
  )
}

function ShortTailCurveConnector({ height }: { height: number }) {
  const styles = useStyles()
  const { colors } = useTheme()

  return (
    <View style={{ height }}>
      <View style={styles.svgConnnectorVerticalLineHead} />
      <Svg width={20} height={18} fill="none">
        <Path
          d="M 2 0 L 2 2 A 14 14 0 0 0 16 16 L 20 16"
          stroke={colors.borderColorDefaultBase}
          strokeWidth={CONNECTOR_BORDER_WIDTH}
        />
      </Svg>
    </View>
  )
}

function SwirlConnector({ style, height }: { style?: ViewStyle; height: number }) {
  const styles = useStyles()
  const { colors } = useTheme()

  return (
    <View style={[styles.swirlConnectorContainer, style]}>
      <View style={{ height }}>
        <View style={styles.svgConnnectorVerticalLineHead} />
        <Svg width={27} height={34} fill="none">
          <Path
            stroke={colors.borderColorDefaultBase}
            strokeWidth={CONNECTOR_BORDER_WIDTH}
            d="M2.07 34c0-6.142 1.201-12.283 3.343-17m0 0c2.305-5.075 5.699-8.5 9.857-8.5 4.86 0 8.8 3.806 8.8 8.5s-3.94 8.5-8.8 8.5c-4.158 0-7.552-3.425-9.857-8.5zm0 0C3.271 12.283 2.07 6.142 2.07 0"
          />
        </Svg>
        <View style={styles.svgConnnectorVerticalLineTail} />
      </View>
      <View style={styles.svgConnnectorVerticalLineTail} />
    </View>
  )
}

// TODO: Remove when Services React Native bumps to React Native 0.74 or higher.
// This fixes a React Native bug where using `flexDirection: 'row-reverse'` also switches the `left`/`right` absolute positioning values.
// The wrapper ensures the MyReplyConnector is always positioned to the left of the message bubble on older versions of React Native.
// Long term fix is described here: https://reactnative.dev/blog/2024/04/22/release-0.74#new-layout-behaviors
function EnforceLeftPositionForMyReplyConnector({ children }: { children: React.ReactNode }) {
  const styles = useStyles()
  return (
    <View
      style={styles.resetPosition}
      pointerEvents="none" // ensures wrapper does not block press events
    >
      {children}
    </View>
  )
}

const useStyles = () => {
  const { colors } = useTheme()
  const borderColor = colors.borderColorDefaultBase

  return StyleSheet.create({
    theirReplyConnectorContainer: {
      width: '50%',
      marginRight: OFFSET_CONNECTOR_CONTAINER,
      alignSelf: 'flex-end',
      flex: 1,
    },
    theirReplyConnectorSpacer: {
      paddingBottom: AVATAR_CONNECTOR_SPACING,
    },
    myReplyConnectorContainer: {
      width: MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH,
      position: 'absolute',
      left: CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL - OFFSET_CONNECTOR_CONTAINER,
      top: 0,
      bottom: 0,
    },
    myReplyConnectorPosition: {
      left: '50%',
    },
    myReplyConnectorSpacer: {
      bottom: AVATAR_CONNECTOR_SPACING,
    },
    verticalLineConnector: {
      flex: 1,
      borderLeftWidth: CONNECTOR_BORDER_WIDTH,
      borderLeftColor: borderColor,
    },
    longHeadCurveConnector: {
      flex: 1,
    },
    shortHeadCurveConnector: {
      flex: 1,
    },
    swirlConnectorContainer: {
      flex: 1,
    },
    svgConnnectorVerticalLineHead: {
      backgroundColor: borderColor,
      width: CONNECTOR_BORDER_WIDTH,
      flex: 1,
      marginBottom: -1, // Ensures there is no gap between the vertical line and the swirl connector
    },
    svgConnnectorVerticalLineTail: {
      backgroundColor: borderColor,
      width: CONNECTOR_BORDER_WIDTH,
      flex: 1,
      marginTop: -1, // Ensures there is no gap between the vertical line and the swirl connector
    },
    // TODO: Remove when Services React Native bumps to React Native 0.74 or higher.
    resetPosition: {
      position: 'absolute',
      left: 0,
      right: 0,
      top: 0,
      bottom: 0,
    },
  })
}