import Taro, { Component } from '@tarojs/taro'
import { View, Button } from "@tarojs/components";

import './index.scss'

export default class ActSheet extends Component {

  state = {
    visible: this.props.show,
    showMask: this.props.mask === void 0 ? true : this.props.mask,
    localVisibleChange: false,
  }

  static getDerivedStateFromProps(props, state) {
    if (!state.localVisibleChange) {
      return { visible: props.show }
    }

    return { localVisibleChange: false }
  }

  handleCancel = e => {
    this.setState({ visible: false, localVisibleChange: true })

    if (this.props.onCancel) {
      this.props.onCancel()
    }
  }

  handleTouchMove = e => {
    e.stopPropagation()
  }

  render() {
    const { visible, showMask } = this.state
    const cls = `actsheet ${ showMask ? 'mask' : '' }`

    return visible && (
      <View className={cls} onTouchMove={this.handleTouchMove}>
        <View className="content sheetitem">
          <View className="body sheetitem">{this.props.children}</View>
          <View className="foot sheetitem">
            <Button className="cancel" onClick={this.handleCancel}>取消</Button>
          </View>
        </View>
      </View>
    )
  }
}
