import {
  Dimensions,
  Image,
  ImageURISource,
  StyleProp,
  StyleSheet,
  Text,
  TextInput,
  TouchableOpacity,
  View,
  ViewStyle,
} from 'react-native';
import React, {FC} from 'react';
import {
  SPACING_10,
  SPACING_12,
  SPACING_16,
  SPACING_4,
  SPACING_6,
  SPACING_8,
} from '../Spacing/Spacing';
import IconComponent from '../Icon/IconComponent';
import {icons} from '../Icon/Icons';
import PlayyText from '../PlayyText/PlayyText';
import {ColorsScheme, useTheme} from '../../theme/ThemeContext';
const {width} = Dimensions.get('screen');

interface IconItem {
  name: string;
  size?: number;
  iconColor?: string;
  onPress?: () => void;
}

interface Props {
  statusBarvalue: number;
  headerStyle?: StyleProp<ViewStyle>;
  backIcon?: boolean;
  backIconColor?: string;
  backIconWidth?: number;
  backIconHeight?: number;
  iconsList?: IconItem[];
  label?: string;
  titlePosition?: 'center' | 'start';
  isSearch?: boolean;
  onChangeText?: (data: string) => void;
  title?: string;
  showCenterSubtitle?: boolean;
  subtitle?: string;
  showPrompt?: string;
  handleBack?: () => void;
  showLeading?: boolean;
  leadingSource?: ImageURISource | undefined;
  leadingContainerStyle?: StyleProp<ViewStyle>;
  handlePressLeading?: () => void;
  isButton?: boolean;
  buttonTitle?: string;
  handlePressButton?: () => void;
  buttonStyle?: StyleProp<ViewStyle>;
  isHeaderContact?: boolean;
  contactSource?: ImageURISource | undefined;
  contactName?: string;
  buttontextColor?: string;
  labelColor?: string;
  contactTitle?: string;
  contactSubTitle?: string;
  isOnline?: boolean;
  titleColor?: string;
}
const NavigationHeader: FC<Props> = ({
  statusBarvalue,
  headerStyle,
  backIcon,
  backIconColor,
  backIconWidth = 8,
  backIconHeight = 16,
  iconsList,
  label,
  titlePosition = 'center',
  isSearch = false,
  onChangeText,
  title,
  showCenterSubtitle = false,
  subtitle,
  showPrompt,
  handleBack,
  showLeading,
  leadingSource,
  leadingContainerStyle,
  handlePressLeading,
  isButton,
  buttonTitle,
  handlePressButton,
  buttonStyle,
  isHeaderContact,
  contactSource,
  contactName,
  buttontextColor,
  labelColor,
  contactTitle,
  contactSubTitle,
  isOnline,
  titleColor,
}) => {
  const {colors} = useTheme();
  const styles = themedStyle(colors);

  return (
    <View
      style={[styles.header, {paddingTop: statusBarvalue ?? 0}, headerStyle]}>
      {showPrompt && (
        <PlayyText
          FootnoteRegular
          style={{textAlign: 'center'}}
          color={colors.labels_primary}>
          {showPrompt}
        </PlayyText>
      )}
      <View style={styles.headerRow}>
        <View style={styles.leftSection}>
          {showLeading && (
            <TouchableOpacity
              style={[styles.leadingContainer, leadingContainerStyle]}
              activeOpacity={0.8}
              onPress={handlePressLeading}>
              {leadingSource && (
                <Image
                  source={leadingSource}
                  style={styles.leadingImage}
                  resizeMode="cover"
                />
              )}
            </TouchableOpacity>
          )}
          <TouchableOpacity
            style={styles.backIconContainer}
            hitSlop={{top: 24, bottom: 24, left: 24, right: 24}}
            onPress={handleBack}
            activeOpacity={0.8}>
            {backIcon && (
              <IconComponent
                name={icons.back}
                width={backIconWidth}
                height={backIconHeight}
                color={backIconColor}
              />
            )}
            {label && (
              <PlayyText
                BodyRegular
                color={labelColor ? labelColor : colors.labels_primary}>
                {label}
              </PlayyText>
            )}
          </TouchableOpacity>
          {isHeaderContact && (
            <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>
        <View style={styles.centerSection}>
          {titlePosition === 'center' && title && (
            <PlayyText
              BodyEmphasized
              color={titleColor ? titleColor : colors.labels_primary}>
              {title}
            </PlayyText>
          )}
          {showCenterSubtitle && subtitle && (
            <PlayyText FootnoteRegular color={colors.labels_secondary}>
              {subtitle}
            </PlayyText>
          )}
        </View>
        <View style={styles.rightSection}>
          {iconsList && (
            <View style={styles.iconsList}>
              {iconsList.map((item: IconItem, index: number) => {
                return (
                  <TouchableOpacity
                    key={index}
                    activeOpacity={0.8}
                    hitSlop={{top: 12, bottom: 12, left: 12, right: 12}}
                    onPress={item.onPress}>
                    <IconComponent
                      name={item?.name}
                      size={item?.size ?? 18}
                      color={item?.iconColor}
                    />
                  </TouchableOpacity>
                );
              })}
            </View>
          )}
          {isButton && (
            <TouchableOpacity
              activeOpacity={0.8}
              onPress={handlePressButton}
              style={buttonStyle}
              hitSlop={{top: 24, bottom: 24, left: 24, right: 24}}>
              <PlayyText
                BodyRegular
                color={
                  buttontextColor ? buttontextColor : colors.labels_primary
                }>
                {buttonTitle}
              </PlayyText>
            </TouchableOpacity>
          )}
        </View>
      </View>
      {titlePosition === 'start' && title && (
        <View style={styles.titleStartContainer}>
          <PlayyText LargeTitle_Condensed style={styles.titleStart}>
            {title}
          </PlayyText>
        </View>
      )}
      {isSearch && (
        <View style={styles.searchContainer}>
          <View style={styles.searchBox}>
            <View style={styles.serachBody}>
              <IconComponent name={icons.search} />
              <TextInput
                placeholder={'Search'}
                style={styles.input}
                placeholderTextColor={'#A1A1AA'}
                onChangeText={onChangeText}
              />
              <IconComponent name={icons.microphone} />
            </View>
          </View>
        </View>
      )}
    </View>
  );
};

export default NavigationHeader;

const themedStyle = (colors: ColorsScheme) =>
  StyleSheet.create({
    header: {
      display: 'flex',
      width: width,
      backgroundColor: colors.background_primary,
    },
    leftSection: {
      flex: 1,
      justifyContent: 'flex-start',
      alignItems: 'flex-start',
    },
    centerSection: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
    },
    rightSection: {
      flex: 1,
      justifyContent: 'flex-end',
      alignItems: 'flex-end',
    },
    title: {
      textAlign: 'center',
    },
    iconsList: {
      flexDirection: 'row',
      alignItems: 'center',
      gap: SPACING_16,
    },
    backIconContainer: {
      flexDirection: 'row',
      alignItems: 'center',
      gap: SPACING_6,
    },
    label: {
      marginLeft: 8,
    },
    titleStart: {
      textAlign: 'left',
    },
    titleStartContainer: {
      width: '100%',
      justifyContent: 'flex-start',
      alignItems: 'flex-start',
      paddingHorizontal: SPACING_16,
      paddingBottom: SPACING_8,
      paddingTop: 3,
    },
    headerRow: {
      flexDirection: 'row',
      alignItems: 'center',
      paddingLeft: SPACING_16,
      paddingRight: SPACING_16,
      paddingVertical: 11,
    },
    searchContainer: {
      paddingHorizontal: SPACING_16,
      paddingBottom: SPACING_12,
      paddingTop: SPACING_4,
    },
    searchBox: {
      paddingHorizontal: 8,
      paddingVertical: 7,
      alignItems: 'center',
      backgroundColor: colors.fill_tertiary,
      borderRadius: SPACING_8,
      flexDirection: 'row',
    },
    input: {
      flex: 1,
      color: colors.labels_primary,
      fontFamily: 'Sohne-Buch',
      fontSize: 16,
      lineHeight: 20,
      marginHorizontal: 8,
    },
    serachBody: {
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-between',
    },
    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: colors.background_tertiary,
      justifyContent: 'center',
      alignItems: 'center',
      position: 'absolute',
      zIndex: 2,
      bottom: 0,
      right: -2,
    },
  });