import React from 'react';
import { Pressable, StyleSheet, View } from 'react-native';
import TopChargeBackground from '../icons/TopChargeBackground';
import HeaderTitle from './HeaderTitle';

export const BackButton = ({style=Styles.backIcon, color=pageTitleTint, children, onPress}) => {
  return (
    <Pressable
      style={({pressed }) => [
        (pressed && isIOS) && {
          opacity: 0.5
        },
        style
      ]}
      android_ripple = {rippleLessIcon}
      onPress={() => {
        if (onPress) {
          onPress();
        } else {
          goBack();
        }
      }}>
      { children
      ? children
      : <BackIcon color={color}/>
      }
    </Pressable>
  )
}

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

export const StationBack = ({bottom = 24, scale=1.0}) => {
  return (
    // <Image
    //   style={{
    //     right: 0,
    //     bottom: bottom,
    //     width: 125.8,
    //     height: 137.64,
    //     position: 'absolute'
    //   }}
    //   source={require('../images/charge/bg-top-station.png')}/>
    <View
      style={{
        right: 0,
        bottom: bottom,
        width: 127.5 * scale,
        height: 136.67 * scale,
        position: 'absolute',
        alignItems: 'flex-end'
      }}>
      <TopChargeBackground width={127.5 * scale} height={136.67 * scale}/>
    </View>
  );
}

export default Toolbar = ({
  title,
  scope,
  showBack=true,
  rightIcon,
  onBackPress
}) => {
  return (
    <View style={Styles.toolbar}>
      { showBack &&
        <BackButton onPress={onBackPress}/>
      }
      <HeaderTitle scope={scope} title={title} style={Styles.titleText}/>
      { rightIcon
      ? rightIcon()
      : showBack
      ? <View style={Styles.backIcon}>
          <MaterialIcons
            name={'arrow-back-ios'}
            size={16}
            color={'transparent'} />
        </View>
      : <></>
      }
    </View>
  )
}

export const Styles = StyleSheet.create({
  toolbar: {
    height: toolbarSize + statusHeight,
    paddingLeft: 2,
    paddingRight: 2,
    paddingTop: statusHeight,
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'center',
    backgroundColor: colorPrimary
  },
  backIcon: {
    width: 48,
    height: 48,
    zIndex: 2,
    alignItems: 'center',
    justifyContent: 'center'
  },
  content: {
    flex: 1,
    paddingRight: 48,
    alignItems: 'center'
  },
  logo: {
    width:123.8,
    height: 38.95
  },
  rightIcon: {
    width: 22,
    height: 22,
    opacity: 0.9
  },
  iconOpacity: {
    opacity: 0.9
  },
  titleText: {
    flex: 1,
    color: pageTitleTint,
    paddingLeft: isIOS ? 8 : 16
  }
});