import {
    Button,
    FormControl,
    FormErrorMessage,
    FormLabel,
    Input,
    Container
} from "@chakra-ui/react"
import { useQueryClient, useMutation } from "@tanstack/react-query"
import { createFileRoute } from "@tanstack/react-router"
import useCustomToast from "../../hooks/useCustomToast"
import { WebSettingsService, type WebSettingUpdate, type ApiError, } from "../../client"
import { handleError } from "../../utils"
import { type SubmitHandler, useForm } from "react-hook-form"



export const Route = createFileRoute("/_layout/webSetting")({
    component: WebSetting,
})



// function getWebSettingQuery() {
//     return {
//         queryFn: () =>
//             WebSettingsService.readWebSetting(),
//         queryKey: ["webSetting"],
//     }
// }




function WebSettingForms() {

    const showToast = useCustomToast()
    const queryClient = useQueryClient()

    // const {
    //     data: webSetting,
    //     isPending,
    //     isPlaceholderData,
    // } = useQuery({
    //     ...getWebSettingQuery(),
    //     placeholderData: (prevData) => prevData,
        
    // })

    

    

        const {
            register,
            handleSubmit,
            formState: { isSubmitting, errors, isDirty },
        } = useForm<WebSettingUpdate>({
            mode: "onBlur",
            criteriaMode: "all",
            defaultValues: async() => WebSettingsService.readWebSetting()
        })

        const mutation = useMutation({
            mutationFn: (data: WebSettingUpdate) =>
                WebSettingsService.updateWebSetting({ requestBody: data }),
            onSuccess: () => {
                showToast("Success!", "Settings updated successfully.", "success")

            },
            onError: (err: ApiError) => {
                handleError(err, showToast)
            },
            onSettled: () => {
                queryClient.invalidateQueries({ queryKey: ["webSetting"] })
            },
        })

        const onSubmit: SubmitHandler<WebSettingUpdate> = async (data) => {
            mutation.mutate(data)
        }
       
            return (

                <Container maxW="full" mt="20" as="form" onSubmit={handleSubmit(onSubmit)}>

                    <FormControl isInvalid={!!errors.address}>
                        <FormLabel htmlFor="address">Address</FormLabel>
                        <Input
                            id="address"
                            type="text"
                            {...register("address", {
                                required: "address is required",
                            })}
                            
                        />
                        {errors.address && (
                            <FormErrorMessage>{errors.address.message}</FormErrorMessage>
                        )}
                    </FormControl>
                    <FormControl mt={4}></FormControl>
                    <FormControl >
                        <FormLabel htmlFor="google_map_api_key">Google Map Api Key</FormLabel>
                        <Input
                            id="google_map_api_key"
                            type="text"
                            {...register("google_map_api_key", {
                                required: "google_map_api_key is required",
                            })}

                        />

                    </FormControl>
                    <FormControl mt={4}></FormControl>
                    <FormControl >
                        <FormLabel htmlFor="latitude">Latitude</FormLabel>
                        <Input
                            id="latitude"
                            type="float"
                            {...register("latitude", {
                                required: "latitude is required",
                            })}

                        />

                    </FormControl>
                    <FormControl mt={4}></FormControl>
                    <FormControl >
                        <FormLabel htmlFor="longitude">Longitude</FormLabel>
                        <Input
                            id="longitude"
                            type="float"
                            {...register("longitude", {
                                required: "longitude is required",
                            })}

                        />

                    </FormControl>
                    <FormControl mt={4}></FormControl>
                    <FormControl >
                        <FormLabel htmlFor="phone">Phone</FormLabel>
                        <Input
                            id="phone"
                            type="text"
                            {...register("phone", {
                                required: "phone is required",
                            })}

                        />

                    </FormControl>
                    <FormControl mt={4}></FormControl>
                    <FormControl >
                        <FormLabel htmlFor="email">Email</FormLabel>
                        <Input
                            id="email"
                            type="text"
                            {...register("email", {
                                required: "email is required",
                            })}

                        />

                    </FormControl>
                    <FormControl mt={4}></FormControl>
                    <FormControl >
                        <FormLabel htmlFor="facebook">Facebook</FormLabel>
                        <Input
                            id="facebook"
                            type="text"
                            {...register("facebook", {
                                required: "facebook is required",
                            })}

                        />

                    </FormControl>
                    <FormControl mt={4}></FormControl>
                    <FormControl >
                        <FormLabel htmlFor="instagram">Instagram</FormLabel>
                        <Input
                            id="instagram"
                            type="text"
                            {...register("instagram", {
                                required: "instagram is required",
                            })}

                        />

                    </FormControl>
                    <FormControl mt={4}></FormControl>
                    <FormControl >
                        <FormLabel htmlFor="youtube">Youtube Channel</FormLabel>
                        <Input
                            id="youtube"
                            type="text"
                            {...register("youtube", {
                                required: "youtube is required",
                            })}

                        />

                    </FormControl>
                    <FormControl mt={4}></FormControl>
                    <FormControl >
                        <FormLabel htmlFor="youtube_link">Youtube Video Link</FormLabel>
                        <Input
                            id="youtube_link"
                            type="text"
                            {...register("youtube_link", {
                                required: "youtube_link is required",
                            })}

                        />

                    </FormControl>
                    <FormControl mt={4}></FormControl>
                    <FormControl >
                        <FormLabel htmlFor="whatsapp">Whatsapp</FormLabel>
                        <Input
                            id="whatsapp"
                            type="text"
                            {...register("whatsapp", {
                                required: "whatsapp is required",
                            })}

                        />

                    </FormControl>
                    <FormControl mt={4}></FormControl>
                    <Button
                        variant="primary"
                        type="submit"
                        isLoading={isSubmitting}
                        isDisabled={!isDirty}

                    >
                        Save
                    </Button>
                    <FormControl mt={20}></FormControl>

                </Container>

            )
        
    
}


function WebSetting() {

    return (
        <Container maxW="full">

            <WebSettingForms />

        </Container>
    )
}
