customHeader

/* eslint-disable react-native/no-inline-styles */
import React, { useEffect, useState } from 'react';
import { Animated, Pressable, StatusBar, StyleSheet, Text, TextStyle, TouchableOpacity, View } from 'react-native';
import { hitSlop, iosOpacity, width } from '../../constants/constants';
import GredientBg from './gredientBg';
import fonts from '../../assets/fonts';
import { colors } from '../../theme';
import { useHeaderHeight } from '@react-navigation/elements';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import Icon from 'react-native-vector-icons/Ionicons';
import { ChevronLeftIcon, MenuIcon } from '../../assets/Icons';
import { useIsFocused, useNavigation } from '@react-navigation/native';
import { ViewStyle } from 'react-native';
import AntDesign from 'react-native-vector-icons/AntDesign';
import Ionicons from 'react-native-vector-icons/Ionicons';
import { Dropdown } from 'react-native-element-dropdown';
import { useDispatch } from 'react-redux';
import { storeActiveDay, storeActiveWeek } from '../../redux/actions/fitness';
import { selectDate } from '../../redux/actions/users';


type CustomHeaderType = {
  title?: String;
  bgColor?: String;
  backButton?: String;
  menuButton?: Boolean;
  renderLeftIcon?: String;
  renderRightIcon?: String;
  titleStyle?: TextStyle;
  onPress?: () => {};
  transparent?: boolean;
  whiteHeader?: boolean;
  extraStyles?: ViewStyle;
  dropdownData?: [] | null;
  setValue?: ({ val }: { val: string | number; }) => {};
  onBack?:()=>{};
};

const CustomHeader = ({
  onPress,
  title,
  bgColor,
  backButton,
  menuButton,
  renderLeftIcon,
  renderRightIcon,
  titleStyle,
  transparent,
  whiteHeader,
  extraStyles,
  dropdownData,
  onBack
}: CustomHeaderType) => {

  const headerInset = useSafeAreaInsets();
  const navigation = useNavigation();
  const dispatch = useDispatch()
  const [dropdownValue, setDropdownValue] = useState(null)

  let labelValueArray = [];
  dropdownData?.forEach(item => {
    let labelValue = {
      label: `Week ${item['week']}`,
      value: String(item['week_id']),
    };
    labelValue = ({ ...labelValue, ...item })
    labelValueArray.push(labelValue);
  });

  useEffect(() => {
    if (dropdownData) {
      const filteredData = dropdownData?.filter(item => item?.is_active);
      if (filteredData?.length > 0) {
        setDropdownValue(String(filteredData[0]?.week_id));
        if (filteredData[0]?.days?.length > 0) {
          const filteredDays = filteredData[0]?.days?.filter(item => item?.is_active);
          dispatch(storeActiveDay(filteredDays[0]));
        }
        dispatch(storeActiveWeek(filteredData[0]));
      }
    }
  }, [dropdownData]);

  function FocusAwareStatusBar(props) {
    const isFocused = useIsFocused();
    return isFocused ? <StatusBar {...props} /> : null;
  }

  return (
    <View
      style={[
        styles.container,
        {
          width: width,
          height: width / 7 + headerInset.top,
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: 'space-between',
          paddingHorizontal: 15,
          paddingTop: headerInset.top,
          elevation: 2,
          backgroundColor: bgColor ? bgColor : colors.white,
          ...extraStyles
        },
        iosOpacity,
      ]}>
      {/* <StatusBar
        translucent
        barStyle={'dark-content'}
        backgroundColor={'transparent'}
      /> */}
      <FocusAwareStatusBar
        translucent
        barStyle={'dark-content'}
        backgroundColor={'transparent'}
        animated={true}
        showHideTransition={'slide'}
      />
      <View style={{ flexDirection: 'row', alignItems: 'center' }}>
        {/* <Icon name="chevron-back" size={width / 18} color={colors.black} /> */}
        {menuButton ? <TouchableOpacity onPress={() => navigation?.openDrawer()} >
          <MenuIcon width={width / 15} height={width / 15} />
        </TouchableOpacity> :
          <Pressable onPress={() => onBack ? onBack() : navigation?.goBack()} hitSlop={hitSlop}>
            {whiteHeader ?
              <AntDesign
                name='left'
                size={width / 15}
                color={colors.white}
              /> : <ChevronLeftIcon width={width / 15} height={width / 15} />}
          </Pressable>}
        {!dropdownData &&
          <Animated.Text
            style={[{
              fontFamily: fonts.PoppinsSemiBold,
              fontSize: 18,
              marginLeft: width / 20,
              color: whiteHeader ? colors.white : colors.black,
            }, titleStyle]}>
            {title}
          </Animated.Text>}
      </View>
      {renderRightIcon && typeof (renderRightIcon) == 'object' && renderRightIcon}
      {renderRightIcon && typeof (renderRightIcon) == 'function' && renderRightIcon()}
      {dropdownData &&
        <View style={styles.dropdownContainer}>
          {labelValueArray?.length == 1 ?
            <Text style={[{
              fontFamily: fonts.PoppinsSemiBold,
              fontSize: 18,
            }]}>Week {labelValueArray?.value}</Text> :
            <Dropdown
              style={{
                borderRadius: 5,
                width: 100,
                marginTop: 10
              }}
              itemTextStyle={{ color: '#212529' }}
              placeholderStyle={{
                fontFamily: fonts.PoppinsSemiBold,
                fontSize: 18,
                color: whiteHeader ? colors.white : colors.black,
              }}
              selectedTextStyle={{
                fontFamily: fonts.PoppinsSemiBold,
                fontSize: 18,
                color: whiteHeader ? colors.white : colors.black,
              }}
              dropdownPosition={'bottom'}
              data={labelValueArray}
              placeholder={'Week'}
              labelField={'label'}
              valueField={'value'}
              value={dropdownValue}
              onChange={(item) => {
                if (item?.is_original_data) {
                  setDropdownValue(item?.value);
                  dispatch(storeActiveWeek(item));
                  if (item?.days?.length > 0 && item?.days[0]) {
                    if (item?.days[0].date) {
                      dispatch(storeActiveDay(item?.days[0]));
                      dispatch(selectDate(item?.days[0].date));
                    }
                  }
                }
              }}
              renderRightIcon={() => (
                <Ionicons
                  name={'chevron-down'}
                  size={20}
                  color="#909090"
                />
              )}
            />
          }

        </View>}
    </View>
  );
};

export default CustomHeader;

const styles = StyleSheet.create({
  container: {
    width: width,

    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 15,
    elevation: 2,
  },
  dropdownContainer: {
    position: 'absolute',
    left: 0,
    right: 0,
    alignItems: 'center',
    justifyContent: 'center',
  }
});