taro/src/pages/clock/components/log_publish.tsx

import { Textarea, View, Image, Input, ScrollView } from "@tarojs/components";
import './log_publish.scss'
import { rpxToPx } from "@/utils/tools";
import { useEffect, useState } from "react";
import { useSelector } from "react-redux";
import Taro from "@tarojs/taro";
import { IconArrow, IconClose } from "@/components/basic/Icons";
import NewButton, { NewButtonType } from "@/_health/base/new_button";
import showAlert from "@/components/basic/Alert";
import { IconCamera, IconClock } from "@/_record/components/record_icon";
import { useTranslation } from "react-i18next";
import { MainColorType } from "@/context/themes/color";
import dayjs from "dayjs";
import { addEvents } from "@/services/health";
import { TimeFormatter } from "@/utils/time_format";
import { BASE_IMG_URL, baseUrl } from "@/services/http/api";
import LogTags from "./log_tags";
import PickerCard from "@/_record/components/picker_card";
import showActionSheet from "@/components/basic/ActionSheet";

let useRoute;
let useNavigation;
let LinearGradient;
if (process.env.TARO_ENV == 'rn') {
    useRoute = require("@react-navigation/native").useRoute
    useNavigation = require("@react-navigation/native").useNavigation
    LinearGradient = require('react-native-linear-gradient').default
}

export default function LogPublish(props: { onClose: any, scenario: string, tag?: any, tags: any, addTag: boolean }) {
    const scale = '?x-oss-process=image/format,jpg/resize,w_400'
    const systemInfo: any = Taro.getWindowInfo ? Taro.getWindowInfo() : Taro.getSystemInfoSync();
    const navigationBarHeight = systemInfo.statusBarHeight + 44;
    const screenHeight = systemInfo.screenHeight

    const [showChoose, setShowChoose] = useState(false)
    const record = useSelector((state: any) => state.record);

    const [pics, setPics] = useState<any>([])
    const [desc, setDesc] = useState('')
    const [focus, setFocus] = useState(false)

    const [time, setTime] = useState(dayjs().format('HH:mm'))
    const [selDate, setSelDate] = useState(dayjs().format('YYYY-MM-DD'))

    const [enterTimestmap] = useState(new Date().getTime())

    const [scenario, setScenarios] = useState(props.scenario)
    const [posting, setPosting] = useState(false)

    const [title, setTitle] = useState(props.tag ? props.tag.title : '')
    const [step, setStep] = useState(props.addTag ? 1 : 2)
    const [inputFocus, setInputFocus] = useState(false)
    const [showTimePicker, setShowTimePicker] = useState(false)
    const [addEnter, setAddEnter] = useState(props.addTag ?? false)

    const { t } = useTranslation()

    useEffect(() => {
        if (step == 1) {

            setTimeout(() => {
                setInputFocus(true)
            }, 300)
        }
        else {
            setAddEnter(false)
        }
    }, [step])

    function addImage(isCamera) {
        var source: any = isCamera ? ['camera'] : ['album']
        Taro.chooseImage({
            count: 9 - pics.length,
            sizeType: ['compressed'],
            // mediaType: ['image'],
            sourceType: source,
            success: async function (res) {
                const results = await Promise.all(res.tempFiles.map(getImageInfo));


                chooseSuccess(results, true)
                // checkAuthorized()
            },
            fail: function (res) {
            }
        })
    }

    async function chooseSuccess(res, isAlbum) {
        // const filePaths = res.map(file => file.path
        //     // process.env.TARO_ENV === 'rn' || isFilePath ? file.path : file.tempFilePath
        // )
        Taro.showLoading({
            title: t('health.uploading')
        })

        try {
            const uploadedUrls = await Promise.all(res.map(path => uploadFile2(path, isAlbum ? 'album' : 'camera')))
            setPics([...pics, ...uploadedUrls])
            Taro.hideLoading()
        } catch (error) {
            console.error('Error uploading files:', error)
            Taro.hideLoading()
        }
    }

    function uploadFile2(obj: any, source: string): Promise<string> {
        return new Promise((resolve, reject) => {
            var path = obj.path
            const dot = path.lastIndexOf('.')
            const fileExt = dot > 0 ? path.substring(dot) : ''
            Taro.request({
                method: 'GET',
                timeout: 30000,
                url: `${baseUrl}/api/thirdparty/aliyun/oss-form-upload`,
                header: {
                    'Authorization': 'bearer ' + global.token
                },
                data: {
                    type: 'FOOD_JOURNAL',
                    file_ext: fileExt
                },
                success: (rsp) => {
                    if (rsp.statusCode !== 200) {
                        reject(new Error(t('health.networkError')))
                        return
                    }
                    Taro.uploadFile({
                        timeout: 30000,
                        url: rsp.data.upload_url,
                        filePath: path,
                        name: 'file',
                        formData: rsp.data.fields,
                        success: () => {
                            var temp = JSON.parse(JSON.stringify(obj))
                            temp.url = rsp.data.view_url
                            // resolve(rsp.data.view_url)
                            resolve(temp)
                        },
                        fail: (error) => {

                            reject(error)
                        }
                    })
                },
                fail: reject
            })
        })
    }


    const getImageInfo = (src) => {
        const { tempFilePath, path } = src
        return new Promise((resolve) => {
            Taro.getImageInfo({
                src: tempFilePath ? tempFilePath : path,
                success: (result) => resolve({
                    height: result.height,
                    width: result.width,
                    orientation: result.orientation,
                    path: result.path,
                    type: result.type
                }),
                fail: (error) => resolve({
                    height: 1024,
                    width: 1024,
                    orientation: 'up',
                    path: tempFilePath,
                    type: 'unknown'
                }),
            });
        });
    };

    function tapPic() {
        var list = process.env.TARO_ENV == 'weapp' ? [t('health.add_photos'), t('health.camera2'), t('health.import_chat')] :
            [t('health.add_photos'), t('health.camera2')]
        showActionSheet({
            title: '',
            // showActionSheetWithOptions: showActionSheetWithOptions,
            itemList: list,
            success: function (res) {
                switch (res) {
                    case 0:
                        addImage(false)
                        break;
                    case 1:
                        addImage(true)
                        break;
                    case 2:
                        Taro.chooseMessageFile({
                            count: 9 - pics.length,
                            type: 'image',
                            success: async function (res) {
                                const results = await Promise.all(res.tempFiles.map(getImageInfo));
                                chooseSuccess(results, true)
                            },
                            fail(res) {
                            },
                        })
                        break;
                    case 3:
                        // setImgUrl('')
                        break;
                }
            }
        })
    }

    function save() {
        var date = TimeFormatter.stringToDate(selDate, time)
        date.setMilliseconds(new Date(enterTimestmap).getMilliseconds())


        var params: any = {
            scenario: scenario, //ACTIVITY
            type: 'POINT',
            sub_type: scenario,
            title: title,

            time: {
                start_timestamp: date.getTime()
            }
        }

        // if (router.params.join_id) {
        //     params.join_key = router.params.join_id
        // }

        var moment: any = {
            description: desc,
        }
        if (pics.length > 0) {
            var picList: any = []
            pics.map((item) => {
                picList.push({
                    url: item.url,
                    type: item.url.indexOf('mp4') != -1 ? 'video' : 'image',
                    source: 'album',
                    width: item.width,
                    height: item.height,
                    format: item.format
                })
            })
            moment.media = picList
        }
        params.moment = moment



        // if (event_id && event_id != 'undefined') {
        //     params.event_id = event_id
        // }

        // if (is_temp) {
        //     params.event = window == 'EAT' ? 'EAT_CUSTOM' : 'ACTIVE_CUSTOM'
        // }
        // params.op_page = window == 'EAT' ? 'HOME_EAT' : 'HOME_ACTIVE'


        params.extra = {
            set_time: global.set_time ? global.set_time : new Date().getTime(),
            confirm_time: new Date().getTime()
        }
        if (posting) return
        setPosting(true)
        // Taro.showLoading({
        //     title: t('health.uploading')
        // })
        addEvents(params).then(res => {
            // setShowResult(true)
            // setResult(res)
            setPosting(false)
            // Taro.hideLoading()
            Taro.reLaunch({
                url: '/pages/moment/moment'
            })
            props.onClose()
        }).catch(e => {
            setPosting(false)
            // Taro.hideLoading()
        })
    }

    function getDate() {
        var sel = dayjs(selDate)
        var now = dayjs().format('YYYY-MM-DD')
        const yesterday = dayjs().subtract(1, 'day');
        if (sel.format('YYYY-MM-DD') == now) {
            return ''
        }
        if (yesterday.format('YYYY-MM-DD') == sel.format('YYYY-MM-DD')) {
            return global.language == 'en' ? 'Yesterday ' : '昨天 '
        }
        else {
            return global.language == 'en' ? sel.format('MMM D ') : sel.format('MMMD日 ')
        }
    }

    function getBackground() {
        var time = record.time
        if (!time) return '#fff'
        const { background_colors } = time
        if (!background_colors) {
            return '#fff'
        }
        else if (background_colors.length == 1) {
            return background_colors[0]
        }
        return `linear-gradient(to bottom, ${background_colors[0]}, ${background_colors[1]})`
    }

    function bgView() {
        if (process.env.TARO_ENV == 'weapp') {
            return <View className="main_bg" style={{ background: getBackground() }} />
        }
        var time = record.time
        if (!time) return <View />
        const { background_colors } = time
        if (!background_colors) {
            return <View />
        }
        else if (background_colors.length == 1) {
            return <View />
        }
        return <LinearGradient style={{
            position: 'absolute',
            left: 0,
            top: 0,

            width: rpxToPx(750),
            height: screenHeight,
            zIndex: 0,
            pointerEvents: 'none'
        }}
            colors={[background_colors[0], background_colors[1]]}
            start={{ x: 0, y: 0 }}
            end={{ x: 0, y: 1 }} pointerEvents="none" />
    }

    function publishCard() {
        return <View className="cardShowAni" style={{ paddingTop: rpxToPx(26) }}>

            <View className="content_card">
                <View style={{ display: 'flex', flexDirection: 'row' }} >
                    <NewButton type={NewButtonType.custom}
                        onClick={() => {
                            // setStep(0)
                            // setFocus(false)
                            setStep(0)
                        }}>

                        <View className="sel_tag">
                            {/* <View className="h34 bold">{selPostCount}</View>
                            <View className="h34" style={{ marginLeft: rpxToPx(6) }}>次</View>
                            <View style={{
                                width: rpxToPx(2),
                                height: rpxToPx(32),
                                backgroundColor: '#000',
                                opacity: 0.2,
                                marginLeft: rpxToPx(12),
                                marginRight: rpxToPx(12)
                            }} /> */}
                            <View className="h34 bold">{title}</View>
                            <View style={{ width: rpxToPx(6) }} />
                            <IconArrow width={rpxToPx(34)} color='#000' />

                        </View>
                    </NewButton>
                </View>
                {/* <Input placeholder="hhhhhhh" style={{textAlign:'center'}}/> */}

                <Textarea placeholder={t('health.add_text')} className="textarea2 h44"
                    placeholder-style="color:rgba(0,0,0,0.2)"
                    value={desc}
                    focus={focus}
                    onBlur={() => {
                        setFocus(false)
                    }}
                    onInput={e => {
                        setDesc(e.detail.value)
                    }} />
                <View className="form2">


                    {
                        pics.map((item, index) => {
                            return <View className="cover1" key={index}>
                                <Image src={item.url + scale} mode="aspectFill" className="cover2" key={index} onClick={() => {
                                    Taro.previewImage({
                                        current: pics[index].url,
                                        urls: pics.map(file => file.url)
                                    })
                                }} />
                                <View className="cover_del" onClick={() => {
                                    showAlert({
                                        title: t('health.del_title'),
                                        content: '',
                                        cancelText: t('health.del_cancel'),
                                        confirmText: t('health.del_confirm'),
                                        showCancel: true,
                                        confirm: () => {
                                            var array = JSON.parse(JSON.stringify(pics))
                                            array.splice(index, 1)
                                            setPics(array)
                                        }
                                    })
                                }}>
                                    <View className="cover_del_btn">
                                        <IconClose width={10} height={10} color="#fff" />
                                    </View>
                                </View>
                            </View>
                        })
                    }
                    {
                        pics.length < 9 && <NewButton
                            type={NewButtonType.custom}
                            onClick={tapPic}>
                            <View className="cover1" style={{}}><IconCamera color="#000" width={rpxToPx(48)} /></View>
                        </NewButton>
                    }
                </View>
            </View>




            <View className="time_view" onClick={() => {
                setShowTimePicker(true)
            }}>

                <IconClock width={rpxToPx(36)} color={MainColorType.black_25} />


                <View className="h30" style={{ opacity: 0.25, marginLeft: rpxToPx(12) }}>{t('health.time')}</View>
                <View style={{ flex: 1 }} />
                <View className="h30" style={{ opacity: 0.25 }}>{getDate() + time}</View>
                <IconArrow width={rpxToPx(34)} color={MainColorType.black_25} />
                <View className="border_footer_line" style={{ left: rpxToPx(48) }} />
            </View>

            {/* {
            router.params.join_id && <FollowInfo user={long.follow} />
        } */}



        </View>
    }

    function publishBtn() {
        return <View className="main_footer" style={{ backgroundColor: 'transparent' }}>
            <NewButton
                type={NewButtonType.fill}
                color={MainColorType.orange}
                width={rpxToPx(646)}
                height={rpxToPx(108)}
                title={t('health.share_to_moment')}
                onClick={save}
            />
        </View>
    }

    function tagsContent() {
        return <ScrollView scrollY style={{height:screenHeight-navigationBarHeight}}>
            <View style={{ display: 'flex', alignItems: 'center', flexDirection: 'column', marginTop: rpxToPx(26) }}>
                <Image src={BASE_IMG_URL + 'tag.svg'} style={{ width: rpxToPx(96), height: rpxToPx(96), marginBottom: rpxToPx(24) }} />
                <View className="h50 bold" style={{ textAlign: 'center', width: rpxToPx(600), }}>{t('health.add_a_tag')}</View>
                <LogTags tags={props.tags} scenario={props.scenario} showPublish={(scenario, item, addTag) => {
                    // props.showPublish(scenario, item, tags)
                    if (addTag) {
                        setStep(1)
                        return
                    }
                    setTitle(item.title)
                    setStep(2)
                }} />
            </View>
        </ScrollView>
    }

    function addTagContent() {
        return <View className="cardShowAni" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', marginTop: rpxToPx(300) }}>
            <View className="input_form">
                <Input className="input_content h36" placeholder={t('health.custom_name')} value={title}
                    placeholderClass="input_content_placeholder"
                    focus={inputFocus}
                    autoFocus={inputFocus}
                    maxlength={30}
                    onBlur={() => {
                        setInputFocus(false)
                    }}
                    onInput={(e: any) => {
                        setTitle(e.target.value)
                    }} />
                <View className="form_btns">
                    <View className="form_cancel">
                        <NewButton btnStyle={{ flex: 1 }} type={NewButtonType.img}
                            onClick={() => {
                                if (addEnter) {
                                    props.onClose()
                                    return
                                }
                                setStep(0)
                            }}
                        >
                            <View className="h30 bold">{t('health.cancel')}</View>
                        </NewButton>
                    </View>
                    <View className="form_cancel">
                        <NewButton btnStyle={{ flex: 1 }} type={NewButtonType.img}
                            onClick={() => {

                                if (!title || title.length == 0) return
                                // setChooseTitle(title)
                                // setPostCount(1)
                                setStep(2)
                                // addTag()
                            }}
                        >
                            <View className={!title || title.length == 0 ? 'form_cancel form_confirm h30 bold' : 'form_cancel h30 bold'}

                            >{t('health.confirm')}</View>
                        </NewButton>
                    </View>
                </View>
            </View>
        </View>
    }


    return <View className="log_publish_bg" style={{ overflow: showChoose ? 'hidden' : 'visible' }}>
        {
            bgView()
        }
        <View className="navi_bar" style={{ height: navigationBarHeight, zIndex: 1000 }}>
            <View style={{
                position: 'absolute',
                left: 0,
                right: 0,
                bottom: 0,
                height: 44,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center'
            }}>
                <View style={{
                    position: 'absolute',
                    width: rpxToPx(92),
                    height: rpxToPx(64),
                    left: 22,
                    top: 22 - rpxToPx(32)
                }}
                    onClick={() => {
                        if (addEnter) {
                            props.onClose()
                            return
                        }
                        // if (showResult) {
                        //     process.env.TARO_ENV == 'weapp' ? Taro.navigateBack() : navigation.goBack()
                        //     return
                        // }
                        if (title && title.length > 0 && step == 0) {
                            setStep(2)
                            return
                        }
                        if (step == 2 && (desc.length > 0 || pics.length > 0)) {
                            showAlert({
                                title: t('health.back_no_save'),
                                content: '',
                                showCancel: true,
                                cancelText: t('health.cancel'),
                                confirmText: t('health.exit'),
                                confirm: () => {
                                    props.onClose()
                                    // process.env.TARO_ENV == 'weapp' ? Taro.navigateBack() : navigation.goBack()
                                }
                            })
                            return
                        }
                        props.onClose()
                        // process.env.TARO_ENV == 'weapp' ? Taro.navigateBack() : navigation.goBack()
                    }}>
                    <IconClose color={"#000"} width={rpxToPx(64)} height={rpxToPx(64)} />
                </View>
            </View>
        </View>
        <View style={{ height: navigationBarHeight }} />
        {
            step == 2 && publishCard()
        }
        {
            step == 2 && publishBtn()
        }
        {
            step == 0 && tagsContent()
        }
        {
            step == 1 && addTagContent()
        }
        {
            showTimePicker && <PickerCard onClose={() => { setShowTimePicker(false) }}
                value={new Date(selDate + 'T' + time + ':00').getTime()}
                title={global.language == 'en' ? 'Choose Time' : "选择时间"}
                type="datetime"
                onConfirm={(e) => {
                    setSelDate(dayjs(e).format('YYYY-MM-DD'))
                    setTime(dayjs(e).format('HH:mm'))
                    setShowTimePicker(false)
                }}
            />
        }
    </View>
}