/**
 * 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,
  Text,
  ScrollView,
} from 'react-native';
import { Slider } 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 SliderPage(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',
        }}
        >
          <Slider
            value={value}
            minimumTrackTintColor="blue"
            onValueChange={num => setValue(num)}
            onSlidingComplete={() => console.log('onSlidingComplete')}
            onSlidingStart={() => console.log('onSlidingStart')}
          />

          <Slider
            maximumTrackTintColor="green"
            minimumTrackTintColor="blue"
            thumbTouchSize={{
              width: 80,
              height: 80,
            }}
            value={value}
            onValueChange={num => setValue(num)}
          />
          <Slider
            thumbTintColor={theme.ThemeColor}
            value={value}
            onValueChange={num => setValue(num)}
          />


          <Slider
            thumbTintColor={theme.ThemeColor}
            value={value}
            onValueChange={num => setValue(num)}
          />
          <Text>{`Value: ${value}`}</Text>
        </View>
      </ScrollView>
    </View>
  );
}


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

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

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