import React from 'react';
import { Image, Pressable, StyleSheet, View } from 'react-native';

export const BackButton = ({navigation}) => {
  return (
    <Pressable
      style={Styles.backIcon}
      android_ripple = {{
        color: '#909090',
        radius: 22,
        borderless: true
      }}
      onPress={() => {
        goBack();
      }}>
      <BackIcon/>
    </Pressable>
  )
}

export const BackIcon = () => {
  return <MaterialIcons name={isIOS ? 'arrow-back-ios' : 'arrow-back'} size={24} color={'#333333'} />
}

export const StationBack = ({bottom}) => {
  return (
    <Image
      style={{
        right: 0,
        bottom: bottom ?? 24,
        width: 125.8,
        height: 137.64,
        zIndex: 0,
        position: 'absolute'
      }}
      source={require('../images/charge/bg-top-station.png')}/>
  );
}

export const Styles = StyleSheet.create({
  toolbar: {
    height: 56,
    paddingLeft: 2,
    paddingRight: 2,
    alignItems: 'center',
    flexDirection: 'row',
    backgroundColor: colorPrimary
  },
  backIcon: {
    width: 48,
    height: 48,
    alignItems: 'center',
    justifyContent: 'center'
  },
  content: {
    flex: 1,
    paddingRight: 48,
    alignItems: 'center'
  },
  logo: {
    width:123.8,
    height: 38.95
  }
});

export default Appbar = (props) => {
  return (
    <View style={Styles.toolbar}>
      <BackButton {...props}/>
      <View style={Styles.content}>
        <Image
          source={require('../images/tool-logo.png')}
          style={Styles.logo}
        />
      </View>
    </View>
  )
}