import React, {Component} from 'react';
import {Modal, View, Text, Image} from 'react-native';
import ModalStyles from './Modal/styles';
import {font} from '../utils/common';
import {scaleSize, setSpText} from '../utils/screen';
import Touch from './Touch';

const mStyles = {
  ...ModalStyles,
  innerContainer: {
    ...ModalStyles.innerContainer,
  },
  header: {
    ...ModalStyles.header,
    fontSize: font.title,
  },
};

class TipsModal extends Component {
  render() {
    const {
      tip,
      title,
      leftText,
      rightText,
      leftTouch,
      rightTouch,
      faceType,
      ...props
    } = this.props;
    if (faceType === 'alipay') {
      styles.header = {...styles.header, backgroundColor: '#1b7dc7'};
      styles.right = {
        ...styles.right,
        backgroundColor: '#1b7dc7',
      };
      styles.call = {
        ...styles.call,
        color: '#1b7dc7',
      };
    }
    return (
      <Modal styles={mStyles} {...props}>
        <View style={styles.modalBackgroundStyle}>
          <View style={styles.modal}>
            <View style={styles.header}>
              <Image
                source={require('../assets/Vertical/tip_modal.png')}
                style={styles.image}
                tintColor="white"
              />
              <Text style={styles.title}>{title}</Text>
            </View>
            <View style={styles.container}>
              <Text style={styles.tip}>{tip}</Text>
            </View>
            <View style={styles.footer}>
              <Touch style={styles.left} onPress={() => leftTouch()}>
                <Text style={styles.call}>{leftText}</Text>
              </Touch>
              <Touch style={styles.right} onPress={() => rightTouch()}>
                <Text style={styles.reset}>{rightText}</Text>
              </Touch>
            </View>
          </View>
        </View>
      </Modal>
    );
  }
}

const styles = {
  modalBackgroundStyle: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
  },
  modal: {
    height: '35%',
    width: '80%',
    marginLeft: '10%',
    marginTop: '40%',
    borderRadius: 20,
    backgroundColor: '#fff',
    flexDirection: 'column',
  },
  header: {
    flex: 0.25,
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#2BA245',
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
  },
  image: {
    width: scaleSize(60),
    height: scaleSize(60),
    marginLeft: scaleSize(20),
    marginRight: scaleSize(20),
  },
  title: {
    fontSize: setSpText(45),
    color: '#fff',
  },
  container: {
    flex: 0.45,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    padding: scaleSize(60),
  },
  tip: {
    textAlign: 'center',
    fontSize: setSpText(65),
  },
  footer: {
    flex: 0.3,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  left: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    width: '50%',
    height: '100%',
    borderTopColor: '#ccc',
    borderTopWidth: 1,
    borderBottomLeftRadius: 20,
    backgroundColor: '#f0f0f0',
  },
  call: {
    fontSize: setSpText(65),
    color: '#2BA245',
  },
  right: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    width: '50%',
    height: '100%',
    backgroundColor: '#2BA245',
    borderBottomRightRadius: 20,
  },
  reset: {
    fontSize: setSpText(65),
    color: '#fff',
  },
};

export default TipsModal;
