/**
 * 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 {
  View,
  ScrollView,
} from 'react-native';
import Button from '../../components/ThemeButton';
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 ButtonPage(props:Props) {
  const { theme } = props;
  return (
    <View style={Styles.container}>
      <NavigationBar
        title="按钮"
        left={<BackButton />}
      />
      <ScrollView>
        <View style={{ alignItems: 'center' }}>
          <Button
            title="Welcome"
            containerStyle={{ marginVertical: 10 }}
          />
          <Button
            title="LOG IN"
            buttonStyle={{
              backgroundColor: 'black',
              borderWidth: 2,
              borderColor: 'white',
              borderRadius: 40,
            }}
            containerStyle={{ marginVertical: 10, height: 50, width: 250 }}
            titleStyle={{ fontWeight: 'bold' }}
          />
          <Button
            title="Log in"
            loading={false}
            loadingProps={{ size: 'small', color: 'white' }}
            buttonStyle={{
              backgroundColor: 'rgba(111, 202, 186, 1)',
              borderRadius: 5,
            }}
            titleStyle={{ fontWeight: 'bold', fontSize: 23 }}
            containerStyle={{ marginVertical: 10, height: 50, width: 230 }}
            onPress={() => console.log('aye')}
            underlayColor="transparent"
          />
          <Button
            title="Request an agent"
            titleStyle={{ fontWeight: '500' }}
            buttonStyle={{
              backgroundColor: 'rgba(199, 43, 98, 1)',
              borderColor: 'transparent',
              borderWidth: 0,
            }}
            containerStyle={{ marginTop: 10, width: 275, height: 45 }}
          />
          <Button
            title="SIGN UP"
            disabled
            titleStyle={{ fontWeight: '700' }}
            buttonStyle={{
              backgroundColor: 'rgba(92, 99,216, 1)',
              borderColor: 'transparent',
              borderWidth: 0,
              borderRadius: 5,
            }}
            containerStyle={{ marginTop: 20, width: 300, height: 45 }}
          />
          <Button
            title="SIGN UP"
            loading
            loadingProps={{ size: 'large', color: 'rgba(111, 202, 186, 1)' }}
            titleStyle={{ fontWeight: '700' }}
            buttonStyle={{
              backgroundColor: 'rgba(92, 99,216, 1)',
              borderColor: 'transparent',
              borderWidth: 0,
              borderRadius: 5,
              paddingVertical: 10,
            }}
            containerStyle={{ marginTop: 20, width: 300, height: 45 }}
          />
          <Button
            title="Basic Button"
            buttonStyle={{
              backgroundColor: 'rgba(78, 116, 289, 1)',
              borderRadius: 3,
            }}
            containerStyle={{ marginTop: 20 }}
          />
          <Button
            title="Outline Button"
            buttonStyle={{
              borderColor: 'rgba(78, 116, 289, 1)',
            }}
            type="outline"
            titleStyle={{ color: 'rgba(78, 116, 289, 1)' }}
            containerStyle={{ marginTop: 20 }}
          />

          <Button
            title="HOME"
            loading
            titleStyle={{ fontWeight: '700' }}
            buttonStyle={{
              backgroundColor: 'rgba(111, 202, 186, 1)',
              borderColor: 'transparent',
              borderWidth: 0,
              borderRadius: 30,
              paddingVertical: 10,
            }}
            containerStyle={{ marginTop: 20, width: 100, height: 40 }}
          />
          <Button
            title="Clear Button"
            type="clear"
            titleStyle={{ color: 'rgba(78, 116, 289, 1)' }}
            containerStyle={{ marginTop: 20 }}
          />
          <Button
            title="Light"
            buttonStyle={{
              backgroundColor: 'rgba(244, 244, 244, 1)',
              borderRadius: 3,
            }}
            containerStyle={{ marginTop: 20, height: 40 }}
            titleStyle={{ marginHorizontal: 20, color: 'black' }}
          />
          <Button
            title="Dark"
            buttonStyle={{ backgroundColor: 'rgba(39, 39, 39, 1)' }}
            containerStyle={{ marginTop: 20, height: 40 }}
            titleStyle={{ color: 'white', marginHorizontal: 20 }}
          />
          <Button
            title="Default"
            containerStyle={{ marginTop: 20, height: 40 }}
            buttonStyle={{ backgroundColor: 'rgba(78, 116, 289, 1)' }}
            titleStyle={{ color: 'white', marginHorizontal: 20 }}
          />

          <Button
            title="Secondary"
            buttonStyle={{ backgroundColor: 'rgba(127, 220, 103, 1)' }}
            containerStyle={{ marginTop: 20, height: 40 }}
            titleStyle={{ color: 'white', marginHorizontal: 20 }}
          />
          <Button
            title="Danger"
            buttonStyle={{ backgroundColor: 'rgba(214, 61, 57, 1)' }}
            containerStyle={{ marginTop: 20, height: 40 }}
            titleStyle={{ color: 'white', marginHorizontal: 20 }}
          />
        </View>
      </ScrollView>
    </View>
  );
}


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

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