import { ColorType } from "@/context/themes/color";
import { View, Text } from "@tarojs/components";
import { useRouter } from "@tarojs/taro";
import { useEffect, useState } from "react";
import './Result.scss';
import Taro from "@tarojs/taro";
import { useTranslation } from "react-i18next";
import { deleteWorkoutRecord } from "@/services/workout";
import { rpxToPx } from "@/utils/tools";

export default function Component() {
    const router = useRouter();
    const [histories, setHistories] = useState<any>([])
    const [record, setRecord] = useState(null)
    const { t } = useTranslation()

    useEffect(() => {
        var data = JSON.parse(router.params.detail as any)
        console.log(data)
        setRecord(data)
        var list = data.items[0].groups
        setHistories(list)
    }, [])

    function twoTimeDuration(start, end) {
        var time = Math.floor((end - start) / 1000);
        const hours = Math.floor(time / 3600);
        const minutes = Math.floor((time % 3600) / 60);
        const seconds = Math.floor(time % 60);
        var strDuration = ''
        if (hours > 0) {
            strDuration = `${hours}时`
        }
        if (minutes > 0) {
            strDuration += `${minutes}分`
        }
        if (seconds > 0) {
            strDuration += `${seconds}秒`
        }
        return strDuration.length == 0 ? '1秒' : strDuration
    }

    function getCount() {
        var count = 0
        histories.map(item => {
            if (item.type == 'GROUP') {
                count++
            }
        })

        return count
    }

    function getIndex(index) {
        var count = 0
        for (var i = 0; i <= index; i++) {
            if (histories[i].type == 'GROUP') {
                count++
            }
        }
        return count;
    }

    function getValue(item) {
        var list = item.values
        var count = 1
        var unit = ''
        for (var i = 0; i < list.length; i++) {
            count = count * (parseInt(list[i].value + ''))
            unit = unit + list[i].unit + '·'
        }
        var result = count + unit
        return result.substring(0, result.length - 1)
    }

    function del() {
        Taro.showModal({
            title: t('feature.common.modal.delete_item_title'),
            content: t('feature.common.modal.delete_item_content'),
            success: function (res) {
                if (res.confirm) {
                    delData()
                }
            }
        })
    }

    function delData() {
        deleteWorkoutRecord({ id: (record as any).id }).then(res => {
            global.delWorkoutRecord()
            global.refreshWorkout()
            Taro.navigateBack()
        })
    }

    return <View style={{ color: '#fff', display: 'flex', flexDirection: 'column' }}>
        <Text className="result_detail_text" style={{ color: router.params.themeColor }}>{router.params.title}</Text>
        <Text className="result_detail_text" style={{color:'#fff',opacity:0.4,marginTop:rpxToPx(10),marginBottom:rpxToPx(20)}}>计时训练</Text>
        <Text className="result_detail_text">训练统计</Text>
        <View style={{marginLeft:rpxToPx(32),display:'flex',flexDirection:'column'}}>
            <Text>总量</Text>
            <Text style={{ color: router.params.themeColor }}>111</Text>
            <Text>用时</Text>
            <View style={{flexDirection:'row',display:'flex',width:'100%'}}>
                <View style={{display:'flex',flexDirection:'column',alignItems:'center',flex:1}}>
                    <Text style={{ color: router.params.themeColor }}>111</Text>
                    <Text>实际</Text>
                </View>
                <View style={{display:'flex',flexDirection:'column',alignItems:'center',flex:1}}>
                    <Text style={{ color: router.params.themeColor }}>111</Text>
                    <Text>计划</Text>
                </View>
            </View>

        </View>
        {/* <View>
            <Text>用时</Text>
            <Text style={{ color: router.params.themeColor }}>111</Text>
        </View> */}
        <Text className="result_detail_text">训练详情</Text>
        {
            histories.length > 0 && <Text className="result_count">共{getCount()}组</Text>
        }


        {
            histories.map((item, index) => {
                return <View key={index} className={item.typ == 'GROUP' ? 'result_item' : 'result_item result_item_rest'}>
                    <Text>{item.type == 'GROUP' ? `第${getIndex(index)}组` : '组间休息'}</Text>
                    {item.type == 'GROUP' && <Text style={{ color: router.params.themeColor }}>{getValue(item)}</Text>}
                    <Text className="result_time">{twoTimeDuration(item.start.timestamp, item.end.timestamp)}</Text>
                </View>
            })
        }
        <Text className="result_del" onClick={del}>删除训练记录</Text>
    </View>
}