import React, {FC, ReactNode} from 'react';
import {
  StyleProp,
  StyleSheet,
  TouchableOpacity,
  View,
  ViewStyle,
} from 'react-native';
import {SPACING_16} from '../Spacing/Spacing';
import PlayyText from '../PlayyText/PlayyText';
import {useHeaderContext} from './Header';

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

interface HeaderRightProps {
  children?: ReactNode;
  icons?: IconItem[];
  isButton?: boolean;
  buttonTitle?: string;
  buttonTextColor?: string;
  buttonStyle?: StyleProp<ViewStyle>;
  onButtonPress?: () => void;
}

const HeaderRight: FC<HeaderRightProps> = ({
  children,
  icons,
  isButton,
  buttonTitle,
  buttonTextColor,
  buttonStyle,
  onButtonPress,
}) => {
  const {colors} = useHeaderContext();
  const styles = themedStyle();

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

  return (
    <View style={styles.rightSection}>
      {icons && (
        <View style={styles.iconsList}>
          {icons.map((item: IconItem, index: number) => {
            return (
              <TouchableOpacity
                key={index}
                activeOpacity={0.8}
                hitSlop={{top: 12, bottom: 12, left: 12, right: 12}}
                onPress={item.onPress}>
                <PlayyText
                  BodyEmphasized
                  color={item?.iconColor ?? colors.labels_primary}>
                  {item.name}
                </PlayyText>
              </TouchableOpacity>
            );
          })}
        </View>
      )}
      {isButton && (
        <TouchableOpacity
          activeOpacity={0.8}
          onPress={onButtonPress}
          style={buttonStyle}
          hitSlop={{top: 24, bottom: 24, left: 24, right: 24}}>
          <PlayyText
            BodyRegular
            color={buttonTextColor ? buttonTextColor : colors.labels_primary}>
            {buttonTitle}
          </PlayyText>
        </TouchableOpacity>
      )}
    </View>
  );
};

const themedStyle = () =>
  StyleSheet.create({
    rightSection: {
      flex: 1,
      justifyContent: 'flex-end',
      alignItems: 'flex-end',
    },
    iconsList: {
      flexDirection: 'row',
      alignItems: 'center',
      gap: SPACING_16,
    },
  });

export default HeaderRight;