import { useEffect, useState } from "react"
import * as environment from "../environment"
import { Button } from "@/components/ui/button"

interface Props {
    isOptions?: boolean
    show: boolean
}

const openInNewTab = (url: string): void => {
    const newWindow = window.open(url, "_blank", "noopener,noreferrer")
    if (newWindow) newWindow.opener = null
}

export const BraveModal = ({ show, isOptions }: Props) => {
    const [showModal, setShowModal] = useState<boolean>(show)

    useEffect(() => {
        setShowModal(show)
    }, [show])

    return (
        <div
            id="defaultModal"
            className={`${isOptions ? "absolute " : ""} ${
                showModal ? "" : "hidden "
            }overflow-y-auto overflow-x-hidden fixed bottom-0 right-0 left-0 z-50 w-full h-modal`}
        >
            <div className="relative w-full h-full md:h-auto">
                <div className={"border-2 border-solid relative bg-muted shadow rounded-t-lg"}>
                    <div className="flex justify-between items-center py-2 px-4 rounded-t">
                        <h5 className="text-base font-semibold text-accent">
                            Attention Brave Users
                        </h5>
                        <Button
                            size="icon"
                            variant="ghost"
                            type="button"
                            onClick={() => setShowModal(false)}
                        >
                            <svg
                                aria-hidden="true"
                                className="w-3 h-3"
                                fill="currentColor"
                                viewBox="0 0 20 20"
                                xmlns="http://www.w3.org/2000/svg"
                            >
                                <path
                                    fillRule="evenodd"
                                    d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                                    clipRule="evenodd"
                                ></path>
                            </svg>
                            <span className="sr-only">Close modal</span>
                        </Button>
                    </div>

                    <div className="py-2 px-4 space-y-2">
                        <p className="text-xs leading-relaxed text-primary">
                            Due to a{" "}
                            <a
                                rel="noreferrer"
                                target="_blank"
                                className="font-bold underline hover:text-accent"
                                href="https://github.com/brave/brave-browser/issues/19990"
                            >
                                recent Brave update (1.36.109)
                            </a>
                            , some results may not display correctly. Disabling, in Brave
                            settings, the{" "}
                            <span className="font-bold"> Restrict Websocket Pool </span>flag
                            and restart browser will help.
                        </p>
                    </div>

                    <div
                        className={`${
                            isOptions ? "justify-start" : "justify-between"
                        }" flex pt-2 pb-4 px-4 space-x-2 border-gray-200 dark:border-gray-600"`}
                    >
                        <Button
                            variant="default"
                            size="sm"
                            type="button"
                            onClick={() => {
                                // TODO: this should produce a react-style event instead of setting the value directly
                                setShowModal(false)
                                environment.set({ type: "braveSetting" }, true)
                            }}
                        >
                            Dismiss
                        </Button>
                        <Button
                            variant="default"
                            size="sm"
                            onClick={() => openInNewTab("https://github.com/brave/brave-browser/issues/19990")}
                            type="button"
                        >
                            Learn More
                        </Button>
                    </div>
                </div>
            </div>
        </div>
    )
}