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

import React from 'react';
import { connect } from 'react-redux';
import { compose } from 'redux';
import Svg, {
  Defs,
  RadialGradient,
  Stop,
  Ellipse,
  Circle,
  Rect,
  G
} from 'react-native-svg';
import {
  View,
  ScrollView,
} from 'react-native';
import { push } from '../../BasicNavigator/actions';
import NavigationBar from '../../components/NavigationBar';
import BackButton from '../../components/BackButton';
import Styles from '../../theme/Styles';


type
  Props = {
};

function shadowPage(props:Props) {
  return (
    <View style={Styles.container}>
      <NavigationBar
        title="阴影"
        left={<BackButton />}
      />
      <ScrollView>
        <View style={{ alignItems: 'center' }}>
          <Svg
            style={{ marginHorizontal: 25, top: -6 }}
            height="24"
            width={global.SCREEN_WIDTH - 50}
          >
            <Defs>
              <RadialGradient
                id="grad"
                cx={global.SCREEN_WIDTH / 2 - 25}
                cy="12"
                rx="170"
                ry="13"
                fx={`${global.SCREEN_WIDTH / 2 - 25}`}
                fy="12"
                gradientUnits="userSpaceOnUse"
              >
                <Stop
                  offset="0"
                  stopColor="#ddd"
                  stopOpacity="1"
                />
                <Stop
                  offset="1"
                  stopColor="#F5FCFF"
                  stopOpacity="1"
                />
              </RadialGradient>
            </Defs>
            <Ellipse cx={global.SCREEN_WIDTH / 2 - 25} cy="12" rx="170" ry="13" fill="url(#grad)" />
          </Svg>
        </View>
      </ScrollView>
    </View>
  );
}


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

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