import React, {FC, ReactNode} from 'react';
import {
  Image,
  ImageURISource,
  StyleProp,
  StyleSheet,
  TouchableOpacity,
  View,
  ViewStyle,
} from 'react-native';
import {SPACING_6, SPACING_10} from '../Spacing/Spacing';
import IconComponent from '../Icon/IconComponent';
import {icons} from '../Icon/Icons';
import PlayyText from '../PlayyText/PlayyText';
import {useHeaderContext} from './Header';
import {GLYPHS} from '../Glyphs';

interface HeaderLeftProps {
  children?: ReactNode;
  backIcon?: boolean;
  backIconColor?: string;
  label?: string;
  labelColor?: string;
  onBackPress?: () => void;
  showLeading?: boolean;
  leadingSource?: ImageURISource;
  leadingContainerStyle?: StyleProp<ViewStyle>;
  onLeadingPress?: () => void;
  isContact?: boolean;
  contactSource?: ImageURISource;
  contactName?: string;
  contactTitle?: string;
  contactSubTitle?: string;
  isOnline?: boolean;
}

const HeaderLeft: FC<HeaderLeftProps> = ({
  children,
  backIcon,
  backIconColor,

  label,
  labelColor,
  onBackPress,
  showLeading,
  leadingSource,
  leadingContainerStyle,
  onLeadingPress,
  isContact,
  contactSource,
  contactName,
  contactTitle,
  contactSubTitle,
  isOnline,
}) => {
  const {colors} = useHeaderContext();
  const styles = themedStyle();

  if (children) {
    return <View style={styles.leftSection}>{children}</View>;
  }

  return (
    <View style={styles.leftSection}>
      {showLeading && (
        <TouchableOpacity
          style={[styles.leadingContainer, leadingContainerStyle]}
          activeOpacity={0.8}
          onPress={onLeadingPress}>
          {leadingSource && (
            <Image
              source={leadingSource}
              style={styles.leadingImage}
              resizeMode="cover"
            />
          )}
        </TouchableOpacity>
      )}

      <TouchableOpacity
        style={styles.backIconContainer}
        hitSlop={{top: 24, bottom: 24, left: 24, right: 24}}
        onPress={onBackPress}
        activeOpacity={0.8}>
        {backIcon && (
          <PlayyText
            BodyEmphasized
            color={backIconColor ? backIconColor : colors.labels_primary}>
            {GLYPHS['chevron-left-strong'].char}
          </PlayyText>
        )}
        {label && (
          <PlayyText
            BodyRegular
            color={labelColor ? labelColor : colors.labels_primary}>
            {label}
          </PlayyText>
        )}
      </TouchableOpacity>

      {isContact && (
        <View style={styles.headerContactContainer}>
          <TouchableOpacity activeOpacity={0.8} style={styles.contactAvatar}>
            {contactSource ? (
              <Image
                source={contactSource}
                style={styles.leadingImage}
                resizeMode="cover"
              />
            ) : (
              <PlayyText>{contactName}</PlayyText>
            )}
            {isOnline && (
              <View style={styles.onlineContainer}>
                <IconComponent name={icons.online} size={10} />
              </View>
            )}
          </TouchableOpacity>
          <View>
            <PlayyText BodyEmphasized color={colors.labels_primary}>
              {contactTitle}
            </PlayyText>
            <PlayyText FootnoteRegular color={colors.labels_secondary}>
              {contactSubTitle}
            </PlayyText>
          </View>
        </View>
      )}
    </View>
  );
};

const themedStyle = () =>
  StyleSheet.create({
    leftSection: {
      flex: 1,
      justifyContent: 'flex-start',
      alignItems: 'flex-start',
    },
    backIconContainer: {
      flexDirection: 'row',
      alignItems: 'center',
      gap: SPACING_6,
    },
    leadingContainer: {
      width: 40,
      height: 40,
      borderRadius: 40,
      overflow: 'hidden',
    },
    leadingImage: {
      width: '100%',
      height: '100%',
      borderRadius: 100,
      overflow: 'hidden',
    },
    headerContactContainer: {
      flexDirection: 'row',
      alignItems: 'center',
      gap: SPACING_10,
    },
    contactAvatar: {
      position: 'relative',
      width: 40,
      height: 40,
      borderRadius: 40,
    },
    onlineContainer: {
      width: 18,
      height: 18,
      borderRadius: 9,
      backgroundColor: 'white',
      justifyContent: 'center',
      alignItems: 'center',
      position: 'absolute',
      zIndex: 2,
      bottom: 0,
      right: -2,
    },
  });

export default HeaderLeft;