import { Check, Copy, RefreshCw } from "lucide-react";
import React from "react";
import { useOrigin } from "~/hooks/use-origin";
import { ModalType, useModalStore } from "~/stores/modal-store";
import { Button } from "../ui/button";
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "../ui/dialog";
import { Input } from "../ui/input";
import { Label } from "../ui/label";

export default function CreateServerInviteModal() {
    const { type, data, isOpen, onClose } = useModalStore();
    const [inviteCode, setInviteCode] = React.useState<string | undefined>(undefined)
    const origin = useOrigin()
    const [isCopied, setCopied] = React.useState(false)

    const isModalOpen = type === ModalType.CREATE_SERVER_INVITE && isOpen
    const inviteLink = `${origin}/app/invite/${inviteCode}`

    const onOpenChange = (openState: boolean) => {
        onClose()
    }

    const regenerateInviteCode = () => {
        import("~/lib/api/client/server").then(m => m.default.createInvite((data as { serverId: string }).serverId)).then(invite => { setInviteCode(invite.code) })
    }

    const onCopy = () => {
        navigator.clipboard.writeText(inviteLink)
        setCopied(true)

        setTimeout(() => setCopied(false), 1000)
    }

    React.useEffect(() => {
        if (isModalOpen) {
            import("~/lib/api/client/server").then(m => m.default.createInvite((data as { serverId: string }).serverId)).then(invite => { setInviteCode(invite.code) })
        } else {
            setInviteCode(undefined)
        }
    }, [isModalOpen])


    return (
        <Dialog open={isModalOpen} onOpenChange={onOpenChange}>
            <DialogContent className="sm:max-w-md">
                <DialogHeader>
                    <DialogTitle>Invite your friends</DialogTitle>
                </DialogHeader>

                <Label>Server invite link</Label>
                <div className="flex items-center gap-x-2">
                    <Input value={inviteLink} readOnly />
                    <Button variant="ghost" size="icon" onClick={onCopy}>
                        {isCopied ? <Check className="size-4" /> : <Copy className="size-4" />}
                    </Button>
                </div>
                <DialogFooter>
                    <Button variant="link" size="none" className="h-9 py-2" onClick={regenerateInviteCode}>
                        Generate a new invite
                        <RefreshCw />
                    </Button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    )
}