import React, {JSX} from 'react';
import {
  Platform,
  StyleProp,
  StyleSheet,
  TextStyle,
  View,
  ViewStyle,
} from 'react-native';
import {CustomPressable} from '../Button';
import {Text} from '../Text';
import {Colors, fontSz, Images, ms, wp} from '../../utils';
import {SmartImage} from '../Images/SmartImage';

export const NotificationHeader = (props: {
  containerStyle?: StyleProp<ViewStyle>;
  headerText: string;
  headerChild: JSX.Element;
  onPressBack: () => void;
  showOther: boolean;
  headerOther?: JSX.Element;
}) => {
  const {
    containerStyle,
    headerText,
    headerChild,
    onPressBack,
    showOther,
    headerOther,
  } = props;
  return (
    <>
      {!showOther && (
        <View style={[styles.container, containerStyle]}>
          <CustomPressable
            activeOpacity={0.75}
            onPress={onPressBack}
            style={{
              flex: 0.125,
            }}>
            <SmartImage
              source={Images.back}
              style={{width: ms(26), height: ms(26), tintColor: '#061423'}}
            />
          </CustomPressable>

          <Text
            style={{
              flex: 0.75,
            }}
            fontSize={fontSz(18)}
            lineHeight={fontSz(19.42)}
            fontWeight="500"
            fontFamily="Gordita-Medium"
            textAlign="center"
            text={`${headerText}`}
            color={Colors.headerText}
          />
          {headerChild ?? headerChild}
        </View>
      )}
      {showOther && (
        <View style={[styles.container, containerStyle]}>{headerOther}</View>
      )}
    </>
  );
};

const Header = (props: {
  textStyle?: StyleProp<TextStyle>;
  containerStyle?: StyleProp<ViewStyle>;
  headerText: string;
  headerChild: JSX.Element;
  onPressBack: () => void;
}) => {
  const {textStyle, containerStyle, headerText, headerChild, onPressBack} =
    props;
  return (
    <>
      <View style={[styles.container, containerStyle]}>
        <CustomPressable
          activeOpacity={0.75}
          onPress={onPressBack}
          style={{
            flex: 0.125,
          }}>
          <SmartImage
            source={Images.back}
            style={{width: ms(26), height: ms(26), tintColor: '#061423'}}
          />
        </CustomPressable>

        <Text
          style={[
            {
              flex: 0.75,
            },
            textStyle,
          ]}
          fontSize={fontSz(18)}
          lineHeight={fontSz(19.42)}
          fontWeight="500"
          fontFamily="Gordita-Medium"
          textAlign="center"
          text={`${headerText}`}
          color={Colors.headerText}
        />
        {headerChild ?? headerChild}
      </View>
    </>
  );
};

export default Header;

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingHorizontal: wp(10),
    marginTop: Platform.select({
      ios: ms(10),
      android: ms(20),
      default: ms(20),
    }),
  },
});