"use client";

import * as Tabs from "@radix-ui/react-tabs";
import { Component, useState } from "react";
import classNames from "classnames";
import Tiktok from "./tiktok";
import Avatar from "./avatar";
import Music from "./music";
import TextVideo from "./textVideo";
import ImageVideo from "./imageVideo";
import { useTranslations } from "next-intl";
export default function CreateTabs() {
    const t = useTranslations("createTabs");
    const [tabVal, setTabVal] = useState("text");
    const tabsChange = (val: string) => {
        setTabVal(val);
    };
    const getVideoTempUrl = (val: string) => {
        for (let i of tabs) {
            if (i.value === val) {
                return i.videoTemp;
            }
        }
    };
    const tabs = [
        {
            name: t("aiTextVideoGenerator"),
            value: "text",
            component: <TextVideo />,
            videoTemp:
                "https://file.typeframes.com.cn/img-to-video/cn/demo_video.webm",
        },
        {
            name: t("aiImageVideoGenerator"),
            value: "image",
            component: <ImageVideo />,
            videoTemp:
                "https://file.typeframes.com.cn/img-to-video/cn/demo_image.webm",
        },
        {
            name: t("aiTiktokVideoGenerator"),
            value: "tiktok",
            component: <Tiktok />,
            videoTemp:
                "https://file.typeframes.com.cn/create-tiktok-video/en/demo_video.webm",
            ImageTemp:
                "https://file.typeframes.com.cn/create-tiktok-video/en/demo_demo.webm",
        },
        {
            name: t("aiTalkingAvatarVideoCreator"),
            value: "avatar",
            component: <Avatar />,
            videoTemp:
                "https://file.typeframes.com.cn/create-Avatar-video/en/demo_video.webm",
            ImageTemp:
                "https://file.typeframes.com.cn/create-Avatar-video/en/demo_video.webm",
        },
        {
            name: t("aiMusicVideoGenerator"),
            value: "music",
            component: <Music />,
            videoTemp:
                "https://file.typeframes.com.cn/music-to-video/cn/demo_video.webm",
            ImageTemp:
                "https://file.typeframes.com.cn/music-to-video/cn/demo_video.webm",
        },
    ];

    return (
        <Tabs.Root
            className=""
            defaultValue="tiktok"
            value={tabVal}
            onValueChange={tabsChange}
        >
            <Tabs.List className="w-full flex flex-wrap gap-3">
                {tabs.map((item, index) => {
                    return (
                        <Tabs.Trigger
                            className={classNames(
                                "relative rounded-lg border border-base-200 bg-white p-3 flex gap-2 items-center justify-center cursor-pointer",
                                {
                                    "outline-2 outline-offset-1 outline outline-secondary":
                                        tabVal === item.value,
                                }
                            )}
                            value={item.value}
                            key={index}
                        >
                            <span className="text-gray-800 font-medium text-xs">
                                {item.name}
                            </span>
                        </Tabs.Trigger>
                    );
                })}
            </Tabs.List>
            <div className="mt-6 pb-20 flex flex-colw w-full gap-4">
                <div className="w-full flex-[100%]">
                    {tabs.map((item, index) => {
                        return (
                            <Tabs.Content
                                className="TabsContent"
                                key={index}
                                value={item.value}
                            >
                                <div className="w-full flex flex-col gap-4">
                                    {item.component}
                                </div>
                            </Tabs.Content>
                        );
                    })}
                </div>
                <div className="gap-4 hidden xl:flex">
                    <div className="border-l-[1px] border-gray-200 h-full"></div>
                    <div className="w-full h-fit mt-8 rounded-xl overflow-hidden">
                        <video
                            src={getVideoTempUrl(tabVal)}
                            playsInline
                            loop
                            muted
                            autoPlay
                            preload="auto"
                        ></video>
                    </div>
                </div>
            </div>
        </Tabs.Root>
    );
}