/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, { useState } from 'react';
import { connect } from 'react-redux';
import { compose } from 'redux';
import {
  View,
  ScrollView,
} from 'react-native';
import { Tooltip, Text } from 'react-native-elements/src/index';
import { push } from '../../BasicNavigator/actions';
import NavigationBar from '../../components/NavigationBar';
import BackButton from '../../components/BackButton';
import Styles from '../../theme/Styles';

type
  Props = {
  theme : Object,
};

function TooltipPage(props : Props) {
  const { theme } = props;
  const [value, setValue] = useState(0);
  return (
    <View style={Styles.container} >
      <NavigationBar
        title="拖拽"
        left={<BackButton />}
      />
      <ScrollView style={{ height: global.SCREEN_HEIGHT - 60 }} >
        <View style={{
          flex: 1, alignItems: 'stretch', justifyContent: 'center',
        }}
        >
          <View style={{ height:100, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }} >
            <Tooltip
              withPointer={false}
              popover={<Text>no caret</Text>}>
              <Text>without caret</Text>
            </Tooltip>

            <Tooltip popover={<Text>Info here</Text>}>
              <Text>Press me</Text>
            </Tooltip>
          </View >
          <View style={{ height: 300,flexDirection: 'row', justifyContent: 'space-around', alignItems: 'center' }} >
            <Tooltip
              backgroundColor="#3bff90"
              popover={<Text>backgroundColor</Text>}
            >
              <Text>i`m different</Text>
            </Tooltip>

            <Tooltip popover={<Text>Info here</Text>}>
              <Text>Press me</Text>
            </Tooltip>

          </View >
          <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-end' }} >
            <Tooltip
              withOverlay={false}
              popover={<Text style={{color:'#fff'}}>no Overlay</Text>}>
              <Text >without Overlay</Text>
            </Tooltip>

            <Tooltip popover={<Text>Info here</Text>}>
              <Text>Press me</Text>
            </Tooltip>
          </View >
        </View >
      </ScrollView >
    </View >
  );
}


function actionMapping(dispatch) {
  return {
    pushTo: compose(dispatch, push),
  };
}

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

export default connect(propsMapping, actionMapping)(TooltipPage);
