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

const {height} = Dimensions.get('window');

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

  componentWillUnmount() {
    clearInterval(this.timer);
  }

  state = {isButtonVisible: false};

  static propTypes = {
    containerStyle: PropTypes.object,
    buttonStyle: PropTypes.object,
    textStyle: PropTypes.object,
    buttonEnabled: PropTypes.object,
    textEnabled: PropTypes.object,
    buttonDisabled: PropTypes.object,
    textDisabled: PropTypes.object,
    title: PropTypes.string,
    onPressIn: PropTypes.func,
    onPressOut: PropTypes.func,
    onPress: PropTypes.func,
    disabled: PropTypes.bool,
  };

  chooseBannerStyle = () => {
    switch (bannerStyle.get()) {
      case 1:
        return {...styles.bannerStyle1, title: '别盯着手机看了'};
      case 2:
        return {...styles.bannerStyle2, title: '别盯着手机看了'};
      case 3:
        return {...styles.bannerStyle3, title: '别盯着手机看了'};
      case 4:
        return {...styles.bannerStyle4, title: '别盯着手机看了'};
      default:
        break;
    }
  };

  clickOnBanner = () => {
    this.setState({isButtonVisible: true});
  };

  pressOutBanner = () => {
    this.timer = setTimeout(() => {
      //执行代码
      this.setState({isButtonVisible: false});
    }, 5000);
  };

  render() {
    const {
      containerStyle,
      buttonStyle,
      textStyle,
      buttonEnabled,
      textEnabled,
      buttonDisabled,
      textDisabled,
      title,
      onPressIn,
      onPressOut,
      onPress,
      disabled,
    } = this.props;
    const myButton = {
      buttonStyle,
      textStyle,
      buttonEnabled,
      textEnabled,
      buttonDisabled,
      textDisabled,
      title,
      onPressIn,
      onPressOut,
      onPress,
      disabled,
    };
    const container = {...styles.container, ...containerStyle};
    const bannerContent = this.chooseBannerStyle();
    const banner = {
      containerStyle: styles.containerStyle,
      textEnabled: bannerContent.textEnabled,
      textDisabled: bannerContent.textDisabled,
      textStyle: styles.textStyle,
      buttonEnabled: bannerContent.buttonEnabled,
      buttonDisabled: bannerContent.buttonDisabled,
      buttonStyle: styles.buttonStyle,
      title: bannerContent.title,
    };
    return (
      <View style={container}>
        {this.state.isButtonVisible ? (
          <MyButton {...myButton} />
        ) : (
          <MyButton
            {...banner}
            onPress={this.clickOnBanner}
            onPressOut={this.pressOutBanner}
          />
        )}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    flex: 1,
  }, //for component
  containerStyle: {
    justifyContent: 'center',
    flex: 1,
  }, //for banner
  bannerStyle1: {
    textEnabled: {
      color: '#bf7636',
    },
    textDisabled: {
      color: '#a0a0a0',
    },
    buttonEnabled: {
      backgroundColor: '#f7e2c3',
      borderColor: '#c98c55',
    },
    buttonDisabled: {
      backgroundColor: '#e6e6e6',
      borderColor: '#D6D6D6',
    },
  },
  bannerStyle2: {
    textEnabled: {
      color: '#60bed9',
    },
    textDisabled: {
      color: '#a0a0a0',
    },
    buttonEnabled: {
      backgroundColor: '#daeae7',
      borderColor: '#70d1e7',
    },
    buttonDisabled: {
      backgroundColor: '#e6e6e6',
      borderColor: '#D6D6D6',
    },
  },
  bannerStyle3: {
    textEnabled: {
      color: '#ee8bc0',
    },
    textDisabled: {
      color: '#a0a0a0',
    },
    buttonEnabled: {
      backgroundColor: '#f9dbe4',
      borderColor: '#fbb9df',
    },
    buttonDisabled: {
      backgroundColor: '#e6e6e6',
      borderColor: '#D6D6D6',
    },
  },
  bannerStyle4: {
    textEnabled: {
      color: '#d75c4b',
    },
    textDisabled: {
      color: '#a0a0a0',
    },
    buttonEnabled: {
      backgroundColor: '#f1b2a6',
      borderColor: '#e76051',
    },
    buttonDisabled: {
      backgroundColor: '#e6e6e6',
      borderColor: '#D6D6D6',
    },
  },
  textStyle: {
    flex: 1,
    fontSize: parseInt(height, 10) / 23,
    fontWeight: 'bold',
    textAlign: 'center',
    textAlignVertical: 'center',
  },
  buttonStyle: {
    alignSelf: 'center',
    height: parseInt(height, 10) / 8,
    width: '80%',
    borderRadius: 10,
    borderWidth: 4,
  },
});

export default MyBanner;