import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/module/dropdown"
import { Button } from "@/components/ui/button"
import { OptionProps } from "@/lib/helper/type"
import PricePlanDetailState from "@/lib/price-plan-detail/state/price-plan-detail-state"
import { Ellipsis, PlusIcon } from "lucide-react"
import { observer } from "mobx-react-lite"

interface Props {
    eventOptions: OptionProps[]
    mainState: PricePlanDetailState
}

const UsageEvents = observer(({
    eventOptions,
    mainState
}:Props) => {

    if (mainState.getFlow() < 1) return null
    
    return (
        <section className="col-span-3 border-r border-primary text-sm font-semibold">
            <div className="flex justify-between p-2 border-b-2 border-primary">
                <h4 className="text-center">Usage Event</h4>
                <PlusIcon className="cursor-pointer" onClick={() => mainState.setUsageEventModalIsOpen(true)}/>
            </div>
            <ul className="py-2 space-y-2">
                {eventOptions.filter(item => mainState.getUsageEventSelected().includes(item.value)).map((item, index) => (
                    <li 
                        onClick={() => mainState.setEventSelected(item)}
                        key={index} 
                        className={`list-none cursor-pointer px-6 ${item.value == mainState.getEventSelected()?.value ? "bg-blue-200" : ""}`}
                    >
                        <div className="flex justify-between gap-2 items-center">
                            <span>{item.name}</span>
                            <DropdownMenu>
                                <DropdownMenuTrigger asChild>
                                    <Button variant="ghost" size="icon" className="h-6 w-6 p-0">
                                        <Ellipsis className="h-4 w-4" />
                                    </Button>
                                </DropdownMenuTrigger>
                                <DropdownMenuContent align="end">
                                    <DropdownMenuItem
                                        onClick={() => {
                                            const updated = [...mainState.getUsageEventSelected()]
                                            updated.splice(index, 1)
                                            mainState.setUsageEventSelected(updated)
                                        }}
                                        className="text-red-500"
                                    >
                                        Remove
                                    </DropdownMenuItem>
                                </DropdownMenuContent>
                            </DropdownMenu>
                        </div>
                    </li>
                ))}
            </ul>
        </section>
    )
})

export default UsageEvents