text: import React from 'react';
  import { withNavigation } from '@react-navigation/compat';
  import { TouchableOpacity, StyleSheet, Platform, Dimensions } from 'react-native';
  import { Button, Block, NavBar, Text, theme } from 'galio-framework';
  
  import Icon from './Icon';
  import Input from './Input';
  import Tabs from './Tabs';
  import argonTheme from '../constants/Theme';
  const mainController = require('../controllers/main');
  import Toast from 'react-native-simple-toast';
  
  const { height, width } = Dimensions.get('window');
  const iPhoneX = () => Platform.OS === 'ios' && (height === 812 || width === 812 || height === 896 || width === 896);
  
  const logout = async () => {
    await mainController.unsetToken();
    Toast.show('Log Out Successful');
    // navigation.navigate('Login')
  }
  
  const BellButton = ({isWhite, style, navigation}) => (
    <TouchableOpacity style={[styles.button, style]} 
    //  onPress={() => navigation.navigate('Pro')}
     >
      <Icon
        family="ArgonExtra"
        size={16}
        name="bell"
        color={argonTheme.COLORS[isWhite ? 'WHITE' : 'ICON']}
      />
      <Block middle style={styles.notify} />
    </TouchableOpacity>
  );
  
  const BasketButton = ({isWhite, style, navigation}) => (
    <TouchableOpacity style={[styles.button, style]} 
    onPress={() => {
      logout()
      navigation.navigate('Login')
      }}
    >
      <Icon
        family="ArgonExtra"
        size={16}
        name="spaceship"
        color={argonTheme.COLORS[isWhite ? 'WHITE' : 'ICON']}
      />
    </TouchableOpacity>
  );
  
  const SearchButton = ({isWhite, style, navigation}) => (
    <TouchableOpacity style={[styles.button, style]} 
    // onPress={() => navigation.navigate('Pro')}
    >
      <Icon
        size={16}
        family="Galio"
        name="search-zoom-in"
        color={theme.COLORS[isWhite ? 'WHITE' : 'ICON']}
      />
    </TouchableOpacity>
  );
  
  class Header extends React.Component {
    handleLeftPress = () => {
      const { back, navigation } = this.props;
      return (back ? navigation.goBack() : navigation.openDrawer());
    }
    renderRight = () => {
      const { white, title, navigation } = this.props;
  
      if (title === 'Title') {
        return [
          <BellButton key='chat-title' navigation={navigation} isWhite={white} />,
          <BasketButton key='basket-title' navigation={navigation} isWhite={white} />
        ]
      }
  
      switch (title) {
        case 'Home':
          return ([
            <BellButton key='chat-home' navigation={navigation} isWhite={white} />,
            <BasketButton key='basket-home' navigation={navigation} isWhite={white} />
          ]);
        case 'Deals':
          return ([
            <BellButton key='chat-categories' navigation={navigation} />,
            <BasketButton key='basket-categories' navigation={navigation} />
          ]);
        case 'Categories':
          return ([
            <BellButton key='chat-categories' navigation={navigation} isWhite={white} />,
            <BasketButton key='basket-categories' navigation={navigation} isWhite={white} />
          ]);
        case 'Category':
          return ([
            <BellButton key='chat-deals' navigation={navigation} isWhite={white} />,
            <BasketButton key='basket-deals' navigation={navigation} isWhite={white} />
          ]);
        case 'Profile':
          return ([
            <BellButton key='chat-profile' navigation={navigation} isWhite={white} />,
            <BasketButton key='basket-deals' navigation={navigation} isWhite={white} />
          ]);
        case 'Product':
          return ([
            <SearchButton key='search-product' navigation={navigation} isWhite={white} />,
            <BasketButton key='basket-product' navigation={navigation} isWhite={white} />
          ]);
        case 'Search':
          return ([
            <BellButton key='chat-search' navigation={navigation} isWhite={white} />,
            <BasketButton key='basket-search' navigation={navigation} isWhite={white} />
          ]);
        case 'Settings':
          return ([
            <BellButton key='chat-search' navigation={navigation} isWhite={white} />,
            <BasketButton key='basket-search' navigation={navigation} isWhite={white} />
          ]);
        default:
          break;
      }
    }
    renderSearch = () => {
      const { navigation } = this.props;
      return (
        <Input
          right
          color="black"
          style={styles.search}
          placeholder="What are you looking for?"
          placeholderTextColor={'#8898AA'}
          onFocus={() => navigation.navigate('Pro')}
          iconContent={<Icon size={16} color={theme.COLORS.MUTED} name="search-zoom-in" family="ArgonExtra" />}
        />
      );
    }
    renderOptions = () => {
      const { navigation, optionLeft, optionRight } = this.props;
  
      
  
      return (
        <Block row style={styles.options}>
          <Button shadowless style={[styles.tab, styles.divider]} 
          // onPress={() => navigation.navigate('Pro')}
          >
            <Block row middle>
              <Icon size={16} name="shop" family="ArgonExtra" style={{ paddingRight: 8 }} color={argonTheme.COLORS.ICON} />
              <Text size={16} style={styles.tabTitle}>{optionLeft || 'House'}</Text>
            </Block>
          </Button>
          <Button shadowless style={[styles.tab]} 
          
          >
            <Block row middle>
              <Icon size={16} name="hat-3" family="ArgonExtra" style={{ paddingRight: 8 }} color={argonTheme.COLORS.ICON}/>
              <Text size={16} style={styles.tabTitle}>{optionRight || 'Roommate'}</Text>
            </Block>
          </Button>
        </Block>
      );
    }
    renderTabs = () => {
      const { tabs, tabIndex, navigation } = this.props;
      const defaultTab = tabs && tabs[0] && tabs[0].id;
      
      if (!tabs) return null;
  
      return (
        <Tabs
          data={tabs || []}
          initialIndex={tabIndex || defaultTab}
          onChange={id => navigation.setParams({ tabId: id })} />
      )
    }
    renderHeader = () => {
      const { search, options, tabs } = this.props;
      if (search || tabs || options) {
        return (
          <Block center>
            {search ? this.renderSearch() : null}
            {options ? this.renderOptions() : null}
            {tabs ? this.renderTabs() : null}
          </Block>
        );
      }
    }
    render() {
      const { back, title, white, transparent, bgColor, iconColor, titleColor, navigation, ...props } = this.props;
  
      const noShadow = ['Search', 'Categories', 'Deals', 'Pro', 'Profile'].includes(title);
      const headerStyles = [
        !noShadow ? styles.shadow : null,
        transparent ? { backgroundColor: 'rgba(0,0,0,0)' } : null,
      ];
  
      const navbarStyles = [
        styles.navbar,
        bgColor && { backgroundColor: bgColor }
      ];
  
      return (
        <Block style={headerStyles}>
          <NavBar
            back={false}
            title={title}
            style={navbarStyles}
            transparent={transparent}
            right={this.renderRight()}
            rightStyle={{ alignItems: 'center' }}
            left={
              <Icon 
                name={back ? 'chevron-left' : "menu"} family="entypo" 
                size={20} onPress={this.handleLeftPress} 
                color={iconColor || (white ? argonTheme.COLORS.WHITE : argonTheme.COLORS.ICON)}
                style={{ marginTop: 2 }}
              />
                
            }
            leftStyle={{ paddingVertical: 12, flex: 0.2 }}
            titleStyle={[
              styles.title,
              { color: argonTheme.COLORS[white ? 'WHITE' : 'HEADER'] },
              titleColor && { color: titleColor }
            ]}
            {...props}
          />
          {this.renderHeader()}
        </Block>
      );
    }
  }
  
  const styles = StyleSheet.create({
    button: {
      padding: 12,
      position: 'relative',
    },
    title: {
      width: '100%',
      fontSize: 16,
      fontWeight: 'bold',
    },
    navbar: {
      paddingVertical: 0,
      paddingBottom: theme.SIZES.BASE * 1.5,
      paddingTop: iPhoneX ? theme.SIZES.BASE * 4 : theme.SIZES.BASE,
      zIndex: 5,
    },
    shadow: {
      backgroundColor: theme.COLORS.WHITE,
      shadowColor: 'black',
      shadowOffset: { width: 0, height: 2 },
      shadowRadius: 6,
      shadowOpacity: 0.2,
      elevation: 3,
    },
    notify: {
      backgroundColor: argonTheme.COLORS.LABEL,
      borderRadius: 4,
      height: theme.SIZES.BASE / 2,
      width: theme.SIZES.BASE / 2,
      position: 'absolute',
      top: 9,
      right: 12,
    },
    header: {
      backgroundColor: theme.COLORS.WHITE,
    },
    divider: {
      borderRightWidth: 0.3,
      borderRightColor: theme.COLORS.ICON,
    },
    search: {
      height: 48,
      width: width - 32,
      marginHorizontal: 16,
      borderWidth: 1,
      borderRadius: 3,
      borderColor: argonTheme.COLORS.BORDER
    },
    options: {
      marginBottom: 24,
      marginTop: 10,
      elevation: 4,
    },
    tab: {
      backgroundColor: theme.COLORS.TRANSPARENT,
      width: width * 0.35,
      borderRadius: 0,
      borderWidth: 0,
      height: 24,
      elevation: 0,
    },
    tabTitle: {
      lineHeight: 19,
      fontWeight: '400',
      color: argonTheme.COLORS.HEADER
    },
  });
  
  export default withNavigation(Header);
  