import {
    Dialog,
    DialogContent,
    DialogHeader,
    DialogTitle,
    DialogDescription,
    DialogFooter,
} from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Label } from "@/components/ui/label"
import { Input } from "@/components/ui/input"
import { DatePicker } from "@/components/module/date-picker"
import Backdrop from "@/components/module/backdrop"
import { CreatePricePlanPayload } from "../../data/repository"
import { format } from "date-fns"
import pricePlanFormStore from "../../store/form-store"
import { observer } from "mobx-react-lite"

interface ModalCreatePriceplanProps {
    ppTypes: Array<{ [key: string]: string }>
    serviceTypes: Array<{ [key: string]: string }>
    onOpenChange: (open: boolean) => void
    onConfirm: (payload: CreatePricePlanPayload) => void
}

const ModalCreatePriceplan = observer(({
    ppTypes,
    serviceTypes,
    onOpenChange,
    onConfirm
}: ModalCreatePriceplanProps) => {

    return (
        <Backdrop isOpen={pricePlanFormStore.getIsOpen()} onClose={() => onOpenChange(false)}>
            <Dialog open={pricePlanFormStore.getIsOpen()} onOpenChange={onOpenChange}>
                <DialogContent className="max-w-4xl" style={{ boxShadow: "rgba(0, 0, 0, 0.35) 0px 5px 15px" }}>
                    <DialogHeader>
                        <DialogTitle>New Price Plan</DialogTitle>
                        <DialogDescription></DialogDescription>
                    </DialogHeader>

                    <form className="mt-4">
                        <section>
                            <h3>Basic Information</h3>
                            <div className="mt-4 px-4 grid grid-cols-2 gap-2">
                                <div>
                                    <Label htmlFor="priceplan-type">Price Plan Type*</Label>
                                    <Select value={pricePlanFormStore.getOfferType()} onValueChange={(val) => pricePlanFormStore.setOfferType(val)}>
                                        <SelectTrigger className="w-full">
                                            <SelectValue id="priceplan-type" placeholder="Select priceplan type" />
                                        </SelectTrigger>
                                        <SelectContent>
                                            {ppTypes.map((item) => (
                                                <SelectItem key={item.id} value={item.id}>
                                                    {item.pricePlanTypeName}
                                                </SelectItem>
                                            ))}
                                        </SelectContent>
                                    </Select>
                                </div>
                                <div>
                                    <Label htmlFor="priceplan-name">Price Plan Name*</Label>
                                    <Input
                                        id="priceplan-name"
                                        placeholder="Input name"
                                        value={pricePlanFormStore.getOfferName()}
                                        onChange={(event) => pricePlanFormStore.setOfferName(event.target.value)}
                                    />
                                </div>
                                <div>
                                    <Label htmlFor="priceplan-code">Price Plan Code</Label>
                                    <Input
                                        id="priceplan-code"
                                        placeholder="Input code"
                                        value={pricePlanFormStore.getPricePlanCode()}
                                        onChange={(event) => pricePlanFormStore.setPricePlanCode(event.target.value)}
                                    />
                                </div>
                                <div>
                                    <Label htmlFor="service-type">Service Type</Label>
                                    <Select
                                        value={pricePlanFormStore.getServiceType()}
                                        onValueChange={(val) => pricePlanFormStore.setServiceType(val)}
                                    >
                                        <SelectTrigger>
                                            <SelectValue id="service-type" placeholder="Select service type" />
                                        </SelectTrigger>
                                        <SelectContent>
                                            {serviceTypes.map((item: any) => (
                                                <SelectItem key={item.id} value={item.id.toString()}>
                                                    {item.servTypeName}
                                                </SelectItem>
                                            ))}
                                        </SelectContent>
                                    </Select>
                                </div>
                                <div>
                                    <Label>Valid Period*</Label>
                                    <div className="flex gap-2">
                                        <DatePicker
                                            placeholder="Start Date"
                                            value={pricePlanFormStore.getBaseValidPeriod()}
                                            onChange={(date) => pricePlanFormStore.setBaseValidPeriod(date)}
                                        />
                                        <span>-</span>
                                        <DatePicker placeholder="End Date" value={undefined} />
                                    </div>
                                </div>
                                <div className="col-span-2">
                                    <Label>Remarks</Label>
                                    <Input
                                        placeholder="Input notes"
                                        value={pricePlanFormStore.getRemarks()}
                                        onChange={(event) => pricePlanFormStore.setRemarks(event.target.value)}
                                    />
                                </div>
                            </div>
                        </section>

                        <section className="mt-4">
                            <h3>Version Information</h3>
                            <div className="mt-4 px-4 grid grid-cols-2 gap-2">
                                <div>
                                    <Label>Valid Period*</Label>
                                    <div className="flex gap-2">
                                        <DatePicker
                                            placeholder="Start Date"
                                            value={pricePlanFormStore.getVersionValidPeriod()}
                                            onChange={(date) => pricePlanFormStore.setVersionValidPeriod(date)}
                                        />
                                        <span>-</span>
                                        <DatePicker placeholder="End Date" />
                                    </div>
                                </div>
                                <div>
                                    <Label htmlFor="source-from">Source From</Label>
                                    <Select
                                        value={pricePlanFormStore.getSourceFrom()}
                                        onValueChange={(val) => pricePlanFormStore.setSourceFrom(val)}
                                    >
                                        <SelectTrigger className="w-full">
                                            <SelectValue id="source-from" placeholder="Select source from" />
                                        </SelectTrigger>
                                        <SelectContent>
                                            <SelectItem value="1">Share From</SelectItem>
                                            <SelectItem value="2">Copy From</SelectItem>
                                        </SelectContent>
                                    </Select>
                                </div>
                                <div>
                                    <Label htmlFor="copy-from">Copy From</Label>
                                    <Select
                                        value={pricePlanFormStore.getCopyFrom()}
                                        onValueChange={(val) => pricePlanFormStore.setCopyFrom(val)}
                                    >
                                        <SelectTrigger className="w-full">
                                            <SelectValue id="copy-from" placeholder="Select copy from" />
                                        </SelectTrigger>
                                        <SelectContent>
                                            <SelectItem value="1">Option 1</SelectItem>
                                            <SelectItem value="2">Option 2</SelectItem>
                                        </SelectContent>
                                    </Select>
                                </div>
                            </div>
                        </section>
                    </form>

                    <DialogFooter>
                        <Button variant="outline" onClick={() => {
                            onOpenChange(false)
                            pricePlanFormStore.resetForm
                        }}>Cancel</Button>
                        <Button
                            disabled={!pricePlanFormStore.getOfferType() || !pricePlanFormStore.getOfferName() || !pricePlanFormStore.getBaseValidPeriod() || !pricePlanFormStore.getVersionValidPeriod()}
                            onClick={() => onConfirm({
                                offerName: pricePlanFormStore.getOfferName(),
                                offerType: pricePlanFormStore.getOfferType(),
                                pricePlanCode: pricePlanFormStore.getPricePlanCode(),
                                serviceType: +pricePlanFormStore.getServiceType(),
                                baseValidPeriod: format(pricePlanFormStore.getBaseValidPeriod()!, "yyyy-MM-dd"),
                                remarks: pricePlanFormStore.getRemarks(),
                                versionValidPeriod: format(pricePlanFormStore.getVersionValidPeriod()!, "yyyy-MM-dd")
                            })}
                        >
                            Submit
                        </Button>
                    </DialogFooter>
                </DialogContent>
            </Dialog>
        </Backdrop>
    )
})

export default ModalCreatePriceplan