import PageHeader from "@/components/Application/Common/PageHeader";
import AppMainContainer, {AppInnerContentContainer} from "@/components/Application/Common/AppMainContainer";
import {Button} from "@/components/ui/button";
import {Plus} from "lucide-react";
import {
    Dialog,
    DialogClose,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
} from "@/components/ui/dialog"
import NoResourcesContainer from "@/components/Application/Common/Resources/NoResourcesContainer";

export default function Resources() {
    return (
        <AppMainContainer>
            {/* page header */}
            <PageHeader header={"Library Resources"}/>

            <AppInnerContentContainer className={"flex flex-col h-[calc(100vh_-_10rem)] md:h-[calc(100vh_-_5rem)]"}>
                <div className={"flex flex-col md:flex-row justify-between gap-x-3 items-center"}>
                    <h1 className={"my-4 text-lg text-gray-700"}>
                        Browse uploaded library resources to help you along your journey.
                        Resources uploaded by trained professionals.
                    </h1>

                    <Dialog>
                        <DialogTrigger asChild>
                            <Button className={"bg-green-700 flex gap-2"}>
                                <Plus/> Upload New Resource
                            </Button>
                        </DialogTrigger>
                        <DialogContent className="sm:max-w-md">
                            <DialogHeader>
                                <DialogTitle>Upload Resource</DialogTitle>
                                <DialogDescription>
                                    Upload a video, pdf or image to our cloud. Any patient registered with us will be
                                    able to view this.
                                </DialogDescription>
                            </DialogHeader>
                            <div className="flex items-center justify-center w-full">
                                <label htmlFor="dropzone-file"
                                       className="flex flex-col items-center justify-center w-full h-32 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600">
                                    <div className="flex flex-col items-center justify-center pt-5 pb-6">
                                        <svg className="w-8 h-8 mb-4 text-gray-500 dark:text-gray-400"
                                             aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                                             viewBox="0 0 20 16">
                                            <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"
                                                  strokeWidth="2"
                                                  d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"/>
                                        </svg>
                                        <p className="mb-2 text-sm text-gray-500 dark:text-gray-400"><span
                                            className="font-semibold">Click to upload</span> or drag and drop</p>
                                        <p className="text-xs text-gray-500 dark:text-gray-400">SVG, PNG, JPG or GIF
                                            (MAX. 800x400px)</p>
                                    </div>
                                    <input id="dropzone-file" type="file" className="hidden"/>
                                </label>
                            </div>
                            <DialogFooter className="sm:justify-end">
                                <DialogClose asChild>
                                    <Button type="button">
                                        Upload
                                    </Button>
                                </DialogClose>

                                <DialogClose asChild>
                                    <Button type="button" variant="secondary">
                                        Close
                                    </Button>
                                </DialogClose>
                            </DialogFooter>
                        </DialogContent>
                    </Dialog>
                </div>

                {/* items count */}
                <div className={"text-sm text-gray-600"}>
                    Library size: <span className={"font-bold"}>0</span> GB {"\t"} &#x2022; {"\t"}
                    Resources: <span className={"font-bold"}>0</span> item(s)
                </div>

                {/* resources container */}
                <NoResourcesContainer/>

            </AppInnerContentContainer>
        </AppMainContainer>
    )
}