/* eslint-disable prettier/prettier */
import React from 'react';
import {createStackNavigator} from '@react-navigation/stack';
import Login from '@src/screens/LoginScreen';
import StoreList from '@src/screens/StoreListScreen';
import PricecheckList from '@src/screens/PricecheckListScreen';
import {Image, StyleSheet, TouchableOpacity, View} from 'react-native';
import {color} from '../themes/color';
import {useTranslation} from 'react-i18next';

const Stack = createStackNavigator();

const StoreListScreenOptions = ({title, showBackButton, navigation}) => {
  return {
    headerShown: true,
    headerLeft: () =>
      showBackButton ? (
        <TouchableOpacity onPress={() => navigation.goBack()}>
          <Image
            style={styles.backArrowHeader}
            resizeMode="contain"
            source={require('../../assets/images/Back.png')}
          />
        </TouchableOpacity>
      ) : (
        <View style={styles.storeListLeftHeader}>
          <TouchableOpacity
            style={styles.storeListLeftHeader}
            onPress={() => console.log('Logout button pressed')}>
            <Image
              style={styles.storeListLeftHeader}
              resizeMode="center"
              source={require('../../assets/images/logout.png')}
            />
          </TouchableOpacity>
        </View>
      ),
    headerRight: () => (
      <Image
        style={styles.storeListRightHeader}
        resizeMode="center"
        source={require('../../assets/images/settings.png')}
      />
    ),
    title: title,
  };
};

const AppScreens = () => {
  //const showBackButton = useNavigationParam('showBackButton');
  const {t} = useTranslation();
  return (
    <Stack.Navigator>
      <Stack.Screen
        name={'storelist'}
        component={StoreList}
        options={({navigation}) =>
          StoreListScreenOptions({
            title: `${t('PRICECHECK')}`,
            showBackButton: false,
            navigation, //
          })
        }
      />

      <Stack.Screen
        name={'pricechecklist'}
        component={PricecheckList}
        options={({navigation}) =>
          StoreListScreenOptions({
            title: `${t('PRICECHECK')}`,
            showBackButton: true,
            navigation, //
          })
        }
      />
    </Stack.Navigator>
  );
};

const AuthScreens = () => (
  <Stack.Navigator>
    <Stack.Screen
      name={'Login'}
      component={Login}
      options={{headerShown: false}}
    />
  </Stack.Navigator>
);

export {AppScreens, AuthScreens};

const styles = StyleSheet.create({
  storeListLeftHeader: {
    alignSelf: 'flex-start',
    tintColor: color.lightTheme.palette.appthemecolor,
  },
  storeListRightHeader: {
    alignSelf: 'flex-end',
    tintColor: color.lightTheme.palette.appthemecolor,
  },
  backArrowHeader: {
    tintColor: color.lightTheme.palette.appthemecolor,
  },
});