/**
 * @flow
 * Created by shiyunjie on 2019-04-30.
 */
import React from 'react';
import { connect } from 'react-redux';
import { Button } from 'react-native-elements';
import LinearGradient from 'react-native-linear-gradient';

type Props = {
  theme: Object,
  buttonStyle: Object,
}

function ThemeButton(props: Props) {
  const { theme, buttonStyle } = props;
  if (buttonStyle && buttonStyle.backgroundColor) {
    return (
      <Button
        {...props}
        buttonStyle={[{ backgroundColor: theme.ThemeColor }, buttonStyle]}
      />
    );
  }
  return (
    <Button
      {...props}
      ViewComponent={LinearGradient} // Don't forget this!
      buttonStyle={[{ backgroundColor: theme.ThemeColor }, buttonStyle]}
      linearGradientProps={{
        colors: [theme.ThemeColor, theme.ThemeEndColor],
        start: { x: 0, y: 0.5 },
        end: { x: 1, y: 0.5 },
      }}
    />
  );
}

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

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