import { ComponentClass } from 'react'
import Taro, { Component } from '@tarojs/taro'
import { View, Input, Image } from '@tarojs/components'
import './index.scss'
import { AtIcon } from 'taro-ui';
import SdFormid from '../sdFormid';

type PageOwnProps = {
  className?: string
  onChooseCaseClick?: any
  onChooseBuildingClick?: any
  onChangePhoneClick?: any
  onImageSelect?: any
  onSendClick?: any
  type?: 'luwu' | 'wzs'
}

type IProps = PageOwnProps

interface Index {
  props: IProps;
}

class Index extends Component {
  static options = {
    addGlobalClass: true
  }
  state = {
    value: '',
    showMulti: false
  }

  handleChange = value => {
    this.setState({
      value: value.detail.value
    })
  }

  sendMessage() {
    this.props.onSendClick({
      content: this.state.value,
      contentType: 0
    })
    this.setState({
      value: ''
    })
  }

  openMulti = () => {
    this.setState({
      showMulti: !this.state.showMulti
    })
  }

  chooseCase = (type) => {
    this.props.onChooseCaseClick(type)
  }

  chooseBuilding = () => {
    this.props.onChooseBuildingClick()
  }

  changePhone = () => {
    this.props.onChangePhoneClick()
  }

  handleAlbum = async () => {
    const data = await Taro.chooseImage({
      sourceType: ['album'],
      count: 9
    })
    data.tempFilePaths.map(path => {
      this.props.onImageSelect(path)
    })

  }

  handleCamera = async () => {
    const data = await Taro.chooseImage({
      sourceType: ['camera'],
      count: 1
    })
    const path = data.tempFilePaths[0]
    this.props.onImageSelect(path)
  }

  render() {
    const { className, type } = this.props
    return (
      <View className={'sd-chat-input ' + (className || '')}>
        <View className='sd-chat-input-content'>
          <Input
            placeholder='请输入'
            type='text'
            value={this.state.value}
            onInput={this.handleChange}
            confirmType='send'
            onConfirm={this.sendMessage}
          />
          <SdFormid onClick={this.openMulti}>
            <AtIcon
              size={32}
              value={this.state.showMulti ? 'close-circle' : 'add-circle'} />
          </SdFormid>
        </View>
        {
          this.state.showMulti &&
          <View className='sd-chat-input-multi'>
            {
              type !== 'wzs' &&
              <View className='sd-chat-input-multi-item' >
                <SdFormid onClick={this.chooseCase.bind(this, 0)}>
                  <Image className='sd-chat-input-multi-item-i'
                    src='http://ft-image.oss-cn-beijing.aliyuncs.com/021.png' />
                  <View>收藏案例</View>
                </SdFormid>
              </View>
            }
            <View className='sd-chat-input-multi-item'>
              <SdFormid onClick={this.chooseCase.bind(this, 1)}>
                <Image className='sd-chat-input-multi-item-i'
                  src='http://ft-image.oss-cn-beijing.aliyuncs.com/024.png' />
                <View>{(type === 'wzs') ? '案例' : '他家案例'}</View>
              </SdFormid>
            </View>
            <View className='sd-chat-input-multi-item'>
              <SdFormid onClick={this.handleAlbum}>
                <Image className='sd-chat-input-multi-item-i'
                  src='http://ft-image.oss-cn-beijing.aliyuncs.com/026.png' />
                <View>相册</View>
              </SdFormid>
            </View>
            <View className='sd-chat-input-multi-item'>
              <SdFormid onClick={this.handleCamera}>
                <Image className='sd-chat-input-multi-item-i'
                  src='http://ft-image.oss-cn-beijing.aliyuncs.com/027.png' />
                <View>拍照</View>
              </SdFormid>
            </View>
            <View className='sd-chat-input-multi-item'>
              <SdFormid onClick={this.chooseBuilding}>
                <Image className='sd-chat-input-multi-item-i'
                  src='http://ft-image.oss-cn-beijing.aliyuncs.com/288.png' />
                <View>工地</View>
              </SdFormid>
            </View>
            <View className='sd-chat-input-multi-item'>
              <SdFormid onClick={this.changePhone}>
                <Image className='sd-chat-input-multi-item-i'
                  src='http://ft-image.oss-cn-beijing.aliyuncs.com/289.png' />
                <View>交换电话</View>
              </SdFormid>
            </View>
          </View>
        }
      </View>
    )
  }
}

export default Index as ComponentClass<PageOwnProps>