import React, { useEffect, useState } 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={isIOS ? 20 : 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 = ({
  style=Styles.toolbar,
  title,
  scope,
  showBack=true,
  rightIcon,
  onBackPress,
  height=toolbarSize,
  children
}) => {
  const [viewStyle, setStyle] = useState({})
  useEffect(() => {
    if (isIOS) {
      setStyle({
        height: height + statusHeight,
        paddingTop: statusHeight
      })
    }
  }, []);
  if (children) {
    return (
      <View style={[style, viewStyle]}>
        {children}
      </View>
    )
  } else {
    return (
      <View style={[style, viewStyle]}>
        { 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: isIOS ? 0 : 2,
    paddingRight: isIOS ? 0 : 2,
    paddingTop: statusHeight,
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'center',
    backgroundColor: colorPrimaryDark
  },
  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,
    textAlign: isIOS ? 'center' : 'left'
  }
});