import React, { useEffect, useState } from 'react';
import {
  SafeAreaView,
  ScrollView,
  Image,
  TouchableOpacity,
  Text,
  View,
  ImageBackground,
} from 'react-native';
import { IMAGES } from '../../values/images';
import styles from './style';
import { useDispatch, useSelector } from 'react-redux';
import {
  getCompanyInfo
} from '../../store/actions/UserAction'
import RootNavigation from '../../navigation/RootNavigation';
import { APP_NAVIGATE_SCREEN } from '../../utils/constant';
import api from '../../network/axios'
const HeaderComponent = props => {
  const dispatch = useDispatch();
  const [logo, setLogo] = useState()
  const userDetails = useSelector(state => state.UserInfo.userInfo);
  const navigateHome = () => {
    RootNavigation.navigate(APP_NAVIGATE_SCREEN.HOME);
  };
  const getCompanyLogo = async () => {
    const res = await dispatch(getCompanyInfo())
    if (res.success) {

      const domain = api.getBaseURL()

      const arr = domain.split('/', 3)
      setLogo(`https://${arr[arr.length - 1]}${res.data.logo}`)

    }
  }
  useEffect(() => {
    getCompanyLogo()
  }, [])
  return (
    <SafeAreaView>
      <ImageBackground style={styles.container} source={IMAGES.BgHeader}>
        {/* <TouchableOpacity
          style={{ marginLeft: 10, flex: 1 }}
          onPress={props.navigation && props.navigation.openDrawer}>
          <Image source={IMAGES.IcMenu} style={styles.iconMenu} />
        </TouchableOpacity> */}
        <TouchableOpacity
          onPress={navigateHome}
          style={{ flex: 1, alignItems: 'center' }}>
          <Image source={{ uri: logo }} style={styles.iconLogo} />
        </TouchableOpacity>

        {
        /* <View
          style={{
            flexDirection: 'row',
            alignItems: 'center',
            flex: 1,
            justifyContent: 'flex-end',
          }}>
          <TouchableOpacity>
            <Image source={IMAGES.IcNotification} style={styles.iconBell} />
          </TouchableOpacity>
          <TouchableOpacity onPress={navigateProfile}>
            <Image
              source={{ uri: 'https://meu.anawork.com' + userDetails.avatar }}
              style={styles.ImgAvatar}
            />
          </TouchableOpacity>
        </View> */}
      </ImageBackground>
    </SafeAreaView>
  );
};

export default HeaderComponent;
