import React, { Component } from 'react'
import {
  StyleSheet,
  View,
  Image,
  Text,
  StatusBar,
  Alert,
  ImageBackground,
  PixelRatio,
  TouchableOpacity,
  ScrollView,
} from 'react-native'
import Icon from '../../components/Iconfont/Iconfont'

function getDisplayName(component) {
  return component.displayName || component.name || 'Component'
}

// 属性代理 - 高阶
export function ppHOC(WrappedComponent) {
  return class PP extends Component {
    static displayName = `HOC(${getDisplayName(WrappedComponent)})`
    constructor(props) {
      super(props)
      this.state = {
        name: '',
      }
      this.onNameChange = this.onNameChange.bind(this)
    }
    onNameChange(event) {
      this.setState({
        name: event.target.value,
      })
    }
    render() {
      const newProps = {
        name: {
          value: this.state.name,
          onChange: this.onNameChange,
        },
      }
      return <WrappedComponent {...this.props} {...newProps} />
    }
  }
}

// 反向继承 - 高阶
export function extHOC(WrappedComponent) {
  return class Inheritance extends WrappedComponent {
    componentDidMount() {
      // 可以方便地得到state，做一些更深入的修改。
      alert(this.state, 222)
    }
    render() {
      return super.render()
    }
  }
}