import Layout from "@/components/layout/layout";
import WorkoutContent from "@/features/workout/WorkoutContent";
import WorkoutStopWatch from "@/features/workout/WorkoutStopWatch";
import WorkoutTimer from "@/features/workout/WorkoutTimer";
import { NaviBarTitleShowType, TemplateType, WorkoutType } from "@/utils/types";
import { View } from "@tarojs/components";
import { useRouter } from "@tarojs/taro";
import { useSelector } from "react-redux";

export default function Page() {
    const workout = useSelector((state: any) => state.workout);
    const router = useRouter();

    function detail() {
        return <View>
            {
                router.params.type == 'timer' && <WorkoutTimer />
            }
            {
                router.params.type == 'stop_watch' && <WorkoutStopWatch targetCount={router.params.count ?? 0} end={(e) => { }} />
            }
            {
                router.params.type == 'content' && <WorkoutContent />
            }

        </View>
    }

    return <Layout children={detail()}
        title={workout.item.name}
        type={TemplateType.customHeader}
        titleShowStyle={NaviBarTitleShowType.scrollToShow}
    />

}