/**
 * @flow
 */

import React, { Element } from 'react';
import { connect } from 'react-redux';
import {
  View,
  Platform,
  TouchableOpacity,
} from 'react-native';
import DeviceInfo from 'react-native-device-info';
import LinearGradient from 'react-native-linear-gradient';
import StyleSheet from '../../utils/StyleSheet';
import Text from '../Text';

export const isLessKitKat = Platform.OS === 'android' && Platform.Version > 19;

export const androidTop = isLessKitKat ? 0 : 24;

const systemVersion = DeviceInfo.getSystemVersion();

export const iosMarginTop = parseInt(systemVersion, 10) < 11 ? 20 : 0;

export const NavHeight = Platform.OS === 'android' ? 44 + androidTop : 64


const styles = StyleSheet.create({
  navBarContainer: {
    ios: {
      marginTop: iosMarginTop,
      height: 64,
    },
    android: {
      paddingTop: androidTop,
      height: 44 + androidTop,
    },
    iPad: {
      height: 98,
    },
    androidPad: {
      height: 88,
    },
    flexDirection: 'row',
  },
  left: {
    flex: 1,
    flexDirection: 'row',
  },
  right: {
    flex: 1,
    flexDirection: 'row-reverse',
  },
  navStyle: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    textAlign: 'center',
    phone: {
      fontSize: 18,
      fontWeight: '400',
    },
    pad: {
      fontSize: 24,
      fontWeight: '400',
    },
    color: 'white',
    alignSelf: 'center',
  },
});

export type NavBarPropsType = {
  left?: Element<*>,
  title?: string,
  titleStyle?: Object,
  right?: Element<*>,
  style?: Object,
  fontStyle?: Object,
  onPress?: ()=>void,
  textStyle?:Object,
  theme:Object,
}

function NavigationBar(props: NavBarPropsType) {
  const {
    style = {}, titleStyle, left, onPress, textStyle, fontStyle, title, right, theme,
  } = props;
  if (theme.ThemeEndColor && !style.backgroundColor) {
    return (
      <LinearGradient
        start={{ x: 0.0, y: 0.25 }}
        end={{ x: 0.5, y: 1.0 }}
        locations={[0, 1]}
        colors={[theme.ThemeColor, theme.ThemeEndColor]}
        style={[styles.navBarContainer, { backgroundColor: theme.ThemeColor }, style]}
      >
        <View style={[styles.left, titleStyle]}>{left}</View>
        <TouchableOpacity style={styles.navStyle} activeOpacity={1} onLongPress={onPress}>
          <Text style={[styles.title, textStyle, fontStyle]}>{title}</Text>
        </TouchableOpacity>
        <View style={styles.right}>{right}</View>
      </LinearGradient>
    );
  }
  return (
    <View style={[styles.navBarContainer, { backgroundColor: theme.ThemeColor }, style]}>
      <View style={[styles.left, titleStyle]}>{left}</View>
      <TouchableOpacity style={styles.navStyle} activeOpacity={1} onLongPress={onPress}>
        <Text style={[styles.title, textStyle, fontStyle]}>{title}</Text>
      </TouchableOpacity>
      <View style={styles.right}>{right}</View>
    </View>
  );
}

function propsMapping({ theme }) {
  return {
    theme,
  };
}

export default connect(propsMapping, null)(NavigationBar);
