portabase/src/components/wrappers/dashboard/database/RestoreForm.tsx

"use client";

import {useState} from "react";

import {DateTimePicker} from "@/components/wrappers/daytime-picker";
import {Button} from "@/components/ui/button";
import {
    Form,
    FormControl,
    FormField,
    FormItem,
    FormLabel,
    FormMessage,
    useZodForm
} from "@/components/ui/form";
import {Input} from "@/components/ui/input";
import {RestoreSchema} from "@/components/wrappers/dashboard/database/restore-form.schema";
import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from "@/components/ui/select";
import {useMutation} from "@tanstack/react-query";
import {ComboBox, ComboBoxFormItem} from "@/components/wrappers/common/combobox";
import {Label} from "@/components/ui/label";

export type restoreFormProps = {
    databaseToRestore: any
    databases: any[]
    backups: any[]
}


export const RestoreForm = (props: restoreFormProps) => {

    const {databaseToRestore, databases, backups} = props

    console.log("bacups", backups)
    console.log("bacups", databaseToRestore)

    const backupLocations = [
        {
            value: "remote-file",
            label: "Remote File",
        },
        {
            value: "desktop-file",
            label: "Desktop File",
        },
    ]

    const executionModes = [
        {
            value: "immediate",
            label: "Immediate",
        },
        {
            value: "scheduled",
            label: "Scheduled",
        },
    ]

    const [selectedDatabaseId, setSelectedDatabaseId] = useState(databaseToRestore.id)


    const filteredBackups = backups.filter(backup => backup.databaseId == selectedDatabaseId)

    const defaultValues = {
        executionMode: "immediate",
        backupLocation: "remote-file",
    }

    const form = useZodForm({
        schema: RestoreSchema,
        defaultValues: defaultValues
    });

    const values = form.getValues()
    console.log("values", values)


    const mutation = useMutation({})


    return (
        <div>
            <Form
                form={form}
                onSubmit={async (values) => {
                    console.log(values);
                }}
            >
                <FormField
                    control={form.control}
                    name="backupLocation"
                    render={({field}) => (
                        <FormItem>
                            <FormLabel>Backup location</FormLabel>
                            <Select onValueChange={field.onChange} defaultValue={field.value}>
                                <FormControl>
                                    <SelectTrigger>
                                        <SelectValue/>
                                    </SelectTrigger>
                                </FormControl>
                                <SelectContent>
                                    {backupLocations.map((backupLocation, key) =>
                                        <SelectItem key={key} value={backupLocation.value}>
                                            {backupLocation.label}
                                        </SelectItem>
                                    )}
                                </SelectContent>
                            </Select>
                            <FormMessage/>
                        </FormItem>
                    )}
                />

                {values.backupLocation == "remote-file" ?
                    <>
                        <div className="flex flex-col">
                            <Label>Database</Label>
                            <ComboBox
                                values={databases.map(database =>
                                    ({"value": database.id, "label": database.name})
                                )}
                                onValueChange={setSelectedDatabaseId}
                                defaultValue={selectedDatabaseId}
                                searchField
                            />
                        </div>
                        <FormField
                            control={form.control}
                            name="remoteBackup"
                            render={({field}) => (
                                <FormItem className="flex flex-col">
                                    <FormLabel>Remote backup</FormLabel>
                                    <ComboBoxFormItem
                                        values={filteredBackups.map(backup => ({
                                                "value": backup.id,
                                                "label": backup.createdAt.toString()
                                            })
                                        )}
                                        {...field}
                                    />
                                    <FormMessage/>
                                </FormItem>
                            )}
                        />
                    </>
                    : null}

                {values.backupLocation == "desktop-file" ?
                    <FormField
                        control={form.control}
                        name="uploadedBackupFile"
                        render={({field}) => (
                            <FormItem>
                                <FormLabel>File</FormLabel>
                                <FormControl>
                                    <Input id="uploadedBackupFile" type="file" {...field}/>
                                </FormControl>
                                <FormMessage/>
                            </FormItem>
                        )}
                    /> : null}

                <FormField
                    control={form.control}
                    name="executionMode"
                    render={({field}) => (
                        <FormItem>
                            <FormLabel>Execution mode</FormLabel>
                            <Select onValueChange={field.onChange} defaultValue={field.value}>
                                <FormControl>
                                    <SelectTrigger>
                                        <SelectValue/>
                                    </SelectTrigger>
                                </FormControl>
                                <SelectContent>
                                    {executionModes.map((executionMode, key) =>
                                        <SelectItem key={key} value={executionMode.value}>
                                            {executionMode.label}
                                        </SelectItem>
                                    )}
                                </SelectContent>
                            </Select>
                            <FormMessage/>
                        </FormItem>
                    )}
                />

                {values.executionMode == "scheduled" ?
                    <FormField
                        control={form.control}
                        name="scheduledDatetime"
                        render={({field}) => (
                            <FormItem>
                                <FormLabel>Scheduled date</FormLabel>
                                <FormControl>
                                    <DateTimePicker value={field.value} onChange={field.onChange}/>
                                </FormControl>
                                <FormMessage/>
                            </FormItem>
                        )}
                    /> : null}

                <Button type="submit">Launch restore</Button>
            </Form>
        </div>
    )
}