import React, {Component} from 'react';
import {View, StyleSheet} from 'react-native';
import MyButton from '../MyButton';
import {bannerStyle} from '../GlobalSetting';

class BannerStyle extends Component {
  constructor() {
    super();
  }

  /**
   * return a function to change bannerStyle
   * @param num
   * @returns {(function(): void)|*}
   */
  changeBannerStyle = num => {
    return () => {
      bannerStyle.set(num);
      this.forceUpdate();
    };
  };

  render() {
    return (
      <View style={styles.container}>
        <MyButton
          title={'模式1'}
          {...styles.myButton1}
          onPress={this.changeBannerStyle(1)}
          disabled={bannerStyle.get() === 1}
        />
        <MyButton
          title={'模式2'}
          {...styles.myButton2}
          onPress={this.changeBannerStyle(2)}
          disabled={bannerStyle.get() === 2}
        />
        <MyButton
          title={'模式3'}
          {...styles.myButton3}
          onPress={this.changeBannerStyle(3)}
          disabled={bannerStyle.get() === 3}
        />
        <MyButton
          title={'模式4'}
          {...styles.myButton4}
          onPress={this.changeBannerStyle(4)}
          disabled={bannerStyle.get() === 4}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#F2E2CE',
    //opacity: 0.5,
    flex: 1,
  },
  myButton1: {
    textEnabled: {
      color: '#bf7636',
    },
    buttonStyle: {
      width: '75%',
      borderRadius: 15,
      borderWidth: 2,
    },
    buttonEnabled: {
      backgroundColor: '#f7e2c3',
      borderColor: '#c98c55',
    },
  },
  myButton2: {
    textEnabled: {
      color: '#60bed9',
    },
    buttonStyle: {
      width: '75%',
      borderRadius: 15,
      borderWidth: 2,
    },
    buttonEnabled: {
      backgroundColor: '#daeae7',
      borderColor: '#70d1e7',
    },
  },
  myButton3: {
    textEnabled: {
      color: '#ee8bc0',
    },
    buttonStyle: {
      width: '75%',
      borderRadius: 15,
      borderWidth: 2,
    },
    buttonEnabled: {
      backgroundColor: '#f9dbe4',
      borderColor: '#fbb9df',
    },
  },
  myButton4: {
    textEnabled: {
      color: '#d75c4b',
    },
    buttonStyle: {
      width: '75%',
      borderRadius: 15,
      borderWidth: 2,
    },
    buttonEnabled: {
      backgroundColor: '#f1b2a6',
      borderColor: '#e76051',
    },
  },
});

export default BannerStyle;