import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/module/dropdown"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import PricePlanDetailState from "@/lib/price-plan-detail/state/price-plan-detail-state"
import RatePlanFormState from "@/lib/price-plan-detail/state/rate-plan-form-state"
import { ChevronDown, Plus, Tickets } from "lucide-react"
import { observer } from "mobx-react-lite"

interface Props {
    mainState: PricePlanDetailState
    ratePlanFormState: RatePlanFormState
}

const RatePlanSection = observer(({ mainState, ratePlanFormState }: Props) => {
    if (mainState.getFlow() < 2) return null

    return (
        <div className={`p-4 ${mainState.getFlow() ? "col-span-9" : "col-span-12"}`}>
            <div className="flex justify-between">
                <div className="flex items-center gap-4">
                    <Button className="h-6 rounded-sm" onClick={() => ratePlanFormState.setOpen(true)}>
                        <Plus />
                        <span>New Rate Plan</span>
                    </Button>
                    <Button className="h-6" variant="outline">
                        <Plus />
                        <span>New From Template</span>
                    </Button>
                    <Button className="h-6" variant="outline">
                        <Plus />
                        <span>Reservation Rule</span>
                    </Button>
                </div>
                <div>
                    <Input placeholder="Search Rate Plan Name" className="h-6 placeholder:text-zinc-400" />
                </div>
            </div>
            <ul className="border border-primary mt-8">
                {mainState.getRatePlans().map((item, idx) => (
                    <li key={item.getRatePlanName() + idx} className="px-4 py-2 border-b last:border-none">
                        <div className="flex justify-between items-center">
                            <div className="flex items-center gap-3">
                                <Tickets />
                                <span>{item.getRatePlanName()}</span>
                            </div>
                            <ChevronDown
                                className={`cursor-pointer transition-transform duration-300 ${item.getIsExpand() ? 'rotate-180' : ''}`}
                                onClick={() => item.setIsExpand(!item.getIsExpand())}
                            />
                        </div>

                        <div
                            className={`transition-all duration-300 overflow-hidden ${item.getIsExpand() ? 'max-h-40 opacity-100 mt-5' : 'max-h-0 opacity-0'
                                }`}
                        >
                            <DropdownMenu>
                                <DropdownMenuTrigger>
                                    <Button className="h-6">
                                        <Plus />
                                        Price Version
                                    </Button>
                                </DropdownMenuTrigger>
                                <DropdownMenuContent>
                                    <DropdownMenuItem>New Version</DropdownMenuItem>
                                    <DropdownMenuItem>New From Template</DropdownMenuItem>
                                    <DropdownMenuItem>Shared From Template</DropdownMenuItem>
                                </DropdownMenuContent>
                            </DropdownMenu>
                        </div>
                    </li>
                ))}
            </ul>

        </div>
    )
})

export default RatePlanSection