import { useState } from '@tarojs/taro'
import { AtDrawer } from "taro-ui"
import { View, Image, Text } from '@tarojs/components'
import classnames from 'classnames'
import arrowImg from '../../assets/ic_arrow_right.png'
import { ItemExtra, CustomLabel, UnEditeableView } from '../index'
import WeAppMapContent from './WeAppMapContent'
import H5MapContent from './H5MapContent'
import './index.scss'
import { AddressObjProps } from './interface'

interface CustomMapProps {
  itemExtra?: string
  name: string
  term: string
  value?: AddressObjProps
  defaultValue?: AddressObjProps
  onChange: (value) => void
  editable?: boolean
  help?: string
  required?: boolean
  hidden?: boolean
  onView?: boolean
  listItemChildren?: boolean
}

const CustomMap: React.FC<CustomMapProps> = ({
  help,
  itemExtra,
  term,
  onChange,
  value,
  name,
  hidden,
  editable,
  required,
  defaultValue,
  onView,
  listItemChildren
}) => {
  const [isOpened, setIsOpened] = useState(false)
  // const [env, setEnv] = useState('WEAPP')
  // const showMap = () => {
  //   if (editable) {
  //     return
  //   }
  //   setIsOpened(true)
  //   setEnv(Taro.getEnv())
  // }

  const hideMap = () => {
    setIsOpened(false)
  }

  if (hidden) {
    return null
  }

  const chooseLocation = () => {
    if (editable) {
      return
    }
    const env = Taro.getEnv()
    if (env === 'WEAPP') {
      const showValue = value || defaultValue
      Taro.chooseLocation({
        latitude: showValue && showValue.location.length ? showValue.location[0] : 0,
        longitude: showValue && showValue.location.length ? showValue.location[1] : 0,
        success: (res) => {
          onChange({
            address: res.address,
            location: [
              res.longitude,
              res.latitude
            ]
          })
        },
        fail: (res) => {
          console.log(`fail: ${res}`)
        }
      })
    } else {
      setIsOpened(true)
    }
  }

  const showValue = value || defaultValue

  if (editable === false || (editable === undefined && onView)) {
    return <UnEditeableView
      term={term}
      help={help}
      value={showValue ? showValue.address : ''}
      listItemChildren={listItemChildren}
      layout={showValue && showValue.address.length >= 20 ? 'column' : 'row'}
    />
  }

  const containerCLs = classnames(['map-container', listItemChildren ? 'item-container' : 'item-container-margin'])

  return (
    <View className={containerCLs}>
      <View
        className='map-content'
      // onClick={showMap}
      >
        <CustomLabel help={help} term={term} required={required} />
        <View className='map-content-extra' onClick={chooseLocation}>
          <Text className='map-content-text'>{showValue && showValue.address ? showValue.address : ''}</Text>
          <Image
            className="map-content-arrow"
            mode="aspectFit"
            src={arrowImg}
          />
        </View>
      </View>
      <ItemExtra text={itemExtra} />
      {isOpened && <AtDrawer show={isOpened} mask width='100vw'>
        {/*
          <WeAppMapContent
            onChange={onChange}
            value={value}
            term={term}
            onCancel={hideMap}
            name={name}
          />
      */}
        <H5MapContent
          onChange={onChange}
          value={value}
          term={term}
          onCancel={hideMap}
          name={name}
        />
      </AtDrawer>}
    </View>
  )
}

export default CustomMap