import Border from "@/twui/components/elements/Border";
import Loading from "@/twui/components/elements/Loading";
import LucideIcon from "@/twui/components/elements/lucide-icon";
import useStatus from "@/twui/components/hooks/useStatus";
import Button from "@/twui/components/layout/Button";
import Center from "@/twui/components/layout/Center";
import Row from "@/twui/components/layout/Row";
import Span from "@/twui/components/layout/Span";
import Stack from "@/twui/components/layout/Stack";
import {
    ComponentProps,
    DetailedHTMLProps,
    Fragment,
    IframeHTMLAttributes,
    ReactNode,
} from "react";
import { twMerge } from "tailwind-merge";

type Props = Omit<
    DetailedHTMLProps<
        IframeHTMLAttributes<HTMLIFrameElement>,
        HTMLIFrameElement
    >,
    "title"
> & {
    url: string;
    wrapperProps?: ComponentProps<typeof Border>;
    title?: string | ReactNode;
};

export default function TtydIframe({
    url,
    wrapperProps,
    title,
    ...props
}: Props) {
    const { loading, setLoading } = useStatus();

    return (
        <Border
            {...wrapperProps}
            className={twMerge("p-0", wrapperProps?.className)}
        >
            <Stack className="gap-0">
                <Row className="p-4 w-full justify-between">
                    <Row>
                        {title ? (
                            <Fragment>
                                <Span size="small" variant="faded">
                                    {title}
                                </Span>
                                {/* <LucideIcon
                                    name="ChevronRight"
                                    size={15}
                                    opacity={0.3}
                                /> */}
                            </Fragment>
                        ) : null}

                        {/* <Span size="small" variant="faded">
                            <a
                                href={url}
                                target="_blank"
                                className="dotted-link"
                            >
                                {url}
                            </a>
                        </Span> */}
                    </Row>
                    <Row>
                        <Button
                            title="Open Full Screen"
                            variant="ghost"
                            className="p-1!"
                            href={url}
                            target="_blank"
                        >
                            <LucideIcon name="ArrowUpRight" size={20} />
                        </Button>
                        <Button
                            title="Refresh Iframe"
                            variant="ghost"
                            className="p-1!"
                            loading={loading}
                            onClick={() => {
                                setLoading(true);
                                setTimeout(() => {
                                    setLoading(false);
                                }, 2000);
                            }}
                            loadingProps={{ size: "smaller" }}
                        >
                            <LucideIcon name="RotateCcw" size={18} />
                        </Button>
                    </Row>
                </Row>
                <hr />
                {loading ? (
                    <Center className="w-full p-10 h-[400px]">
                        <Loading />
                    </Center>
                ) : (
                    <iframe
                        {...props}
                        src={url}
                        className={twMerge("w-full h-[400px]", props.className)}
                    />
                )}
            </Stack>
        </Border>
    );
}