import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import TabsUsageContent from "./usage-content"
import PricePlanDetailViewModel from "../../view-model"

interface Props {
    vm: PricePlanDetailViewModel
}

const PricePlanTab = ({vm}: Props) => {
    
    return (
        <section className="px-4 mt-4">
                <Tabs defaultValue="usage" className="w-full border border-primary">
                    <TabsList className="bg-[#e6f6f8] justify-start w-full">
                        {["usage", "recurring", "subscription", "discount", "trigger", "total", "param", "param-version"].map(tab => (
                            <TabsTrigger
                                key={tab}
                                value={tab}
                                className="data-[state=active]:bg-[#00879E] data-[state=active]:text-white text-[#00879E] hover:bg-[#ccebf0]"
                            >
                                {tab.replace("-", " ").replace(/\b\w/g, l => l.toUpperCase())}
                            </TabsTrigger>
                        ))}
                    </TabsList>
                    <TabsUsageContent usageEventOptions={vm.getUsageEventOptions()} mainState={vm.getMainState()} formState={vm.getRatePlanFormState()}/>
                    <TabsContent value="recurring">Recurring here.</TabsContent>
                    <TabsContent value="subscription">Subscription here.</TabsContent>
                    <TabsContent value="discount">Discount here.</TabsContent>
                    <TabsContent value="trigger">Trigger here.</TabsContent>
                    <TabsContent value="total">Total here.</TabsContent>
                    <TabsContent value="param">Param here.</TabsContent>
                    <TabsContent value="param-version">Param Version here.</TabsContent>
                </Tabs>
            </section>
    )
}

export default PricePlanTab