import React, { useState, useEffect } from 'react'

import { View, Image, Picker  } from '@tarojs/components'

import { AtInput, AtActionSheet, AtActionSheetItem, AtFloatLayout} from 'taro-ui'

import Taro from '@tarojs/taro'

import { postBaby, getRelation } from '../../api/user'

import Tip from '../../utils/tip'

import './index.scss'

const switchGender = (type) => {
    switch (type) {
        case 1:
            return '男'
        case 2:
            return '女'
        default:
            return '未填写'

    }
}

const AddBaby: React.FC = () => {

    const [itemType, setItemType] = useState<number>(0)

    const [ visible, setVisible] = useState<boolean>(false)

    const [ relationList, setRelationList] = useState<Record<string, any>[]>([]) 

    const [ relationName, setRelationName ]  = useState<string>('未填写')

    const [ birthday, setBirthday ] = useState<string>('未填写')

    const [ gender, setGender] = useState<number | string>('未填写')

    const changeBirthday = (e) => setBirthday(e.detail.value)

    const [img, setImg] = useState<string>('') 

    const [ name, setName] = useState<string>('')

    const [relation, setRelation] = useState<string>('')

    // 名字
    const changeName = (e) => setName(e)

    // 宝宝头像
    const changeAva = () => {
        Taro.chooseImage({
            success: (chooseImageRes) => {
                const tempFilePaths = chooseImageRes.tempFilePaths;
                Taro.uploadFile({
                    url: 'http://training.luojigou.vip/training/file/uploadFile',
                    filePath: tempFilePaths[0],
                    name: 'file',
                    formData: {
                        'user': 'test'
                    },
                    success: (uploadFileRes) => {
                        console.log(JSON.parse(uploadFileRes.data).data);
                        setImg(JSON.parse(uploadFileRes.data).data)
                    }
                });
            }
        });
    }

    // 性别
    const changeGender = (value: number) => {
        setGender(value)
        setVisible(false)
    }

    // 选择亲属关系
    const changeRelation = (item: Record<string, any>) => {
        setRelationName(item.name)
        setRelation(item.nameStr)
        setVisible(false)
    }

    // 获取亲属关系
    const GetRelation = async () : Promise<void> => {
        const data = await getRelation()
        setRelationList(data)
    }



    // 打开不同形式的弹窗
    const openModal = (value: number) => {
        setVisible(true)
        setItemType(value)
    }

    // 关闭弹窗
    const closeModal = () => setVisible(false)

    // 保存宝贝信息
    const PostBaby = async () => {
        const $par = {
            birthday,
            gender,
            img,
            name,
            relationName,
            relation
        }
        Tip.loading('保存宝贝信息中')
        const data = await postBaby($par)
        console.log(data);
        Tip.loaded()
        Taro.redirectTo({
             url: '/pages/AuthResult/index'
        });
    }

    useEffect( () => {
        if (itemType === 2 && relationList.length === 0) {
            GetRelation()
        }
    }, [itemType, relationList.length])


    const RenderPop = () => {
        switch (itemType) {
            case 0:
                return (
                    <AtActionSheet isOpened={visible} onClose={closeModal}>
                        <AtActionSheetItem onClick={() => changeGender(1)}>
                            男   
                        </AtActionSheetItem>
                        <AtActionSheetItem onClick={() => changeGender(2)}>
                            女
                        </AtActionSheetItem>
                    </AtActionSheet>
                )
            case 2:
                return (
                    <AtFloatLayout isOpened={visible} customStyle={{height: 300}} onClose={closeModal}>
                        <View className='relation'>
                            {
                                relationList?.map( item => (
                                    <AtActionSheetItem 
                                      className='sheetItem' 
                                      key={item.nameStr}
                                      onClick={() => changeRelation(item)}
                                    >
                                        {item.name}
                                    </AtActionSheetItem>
                                ))
                            }
                        </View>
                    </AtFloatLayout>
                )
        }
    }

    return (
        <View className='AddBaby'>
            <View className='form'>
                <View className='item ava' style={{height: 90, border: 'none'}}>
                    <View className='label'>
                        宝宝头像
                    </View>
                    <View className='content'>
                        {
                            img ? 
                            <Image mode='aspectFill' className='ava-img' src={img} onClick={changeAva}></Image> 
                            : 
                            <View className='ava-img' onClick={changeAva}></View>
                        }
                        
                        
                    </View>
                </View>
                <View className='item'>
                    <View className='label'>
                        昵称
                    </View>
                    <View className='content'>
                        <AtInput 
                          className='name'
                          name='name'
                          placeholderClass='placeholderClass'
                          placeholder='请输入'
                          value={name}
                          onChange={changeName}
                        />
                        <Image style={{width: 8, height: 11}} src={require('../../assets/AddBaby/arrow.png')} />
                    </View>
                </View>
                <View className='item' onClick={() => openModal(0)}>
                    <View className='label'>
                        性别
                    </View>
                    <View className='content'>
                        <View className='text'>
                            {switchGender(gender)}
                        </View>
                        <Image style={{width: 8, height: 11}} src={require('../../assets/AddBaby/arrow.png')} />
                    </View>
                </View>
                <Picker mode='date' onChange={changeBirthday} value='2'>
                    <View className='item' onClick={() => openModal(1)}>
                            <View className='label'>
                                生日
                            </View>
                            <View className='content'>
                                <View className='text'>{birthday}</View>
                                <Image style={{width: 8, height: 11}} src={require('../../assets/AddBaby/arrow.png')} />
                            </View>
                        </View>
                </Picker>
                <View className='item' onClick={() => openModal(2)}>
                    <View className='label'>
                        我是宝宝的
                    </View>
                    <View className='content'>
                        <View className='text'>{relationName}</View>
                        <Image style={{width: 8, height: 11}} src={require('../../assets/AddBaby/arrow.png')} />
                    </View>
                </View>
            </View>
            
            <View className='button' onClick={PostBaby}>
                保存
            </View>

            {RenderPop()}

        </View>
    )
}

export default AddBaby
