import {useQuery} from "@apollo/client";
import {Card, Form, Result} from "antd";
import queryString from "query-string";
import React, {useEffect} from "react";
import {useTranslation} from "react-i18next";
import {useLocation} from "react-router-dom";
import {QUERY_CSI_RESPONSE_BY_PK} from "../../graphql/csi.queries";
import {DateFormatter} from "../../utils/DateFormatter";
import AlertComponent from "../alert/alert.component";
import ConfigFormComponents from "../config-form-components/config-form-components.component";
import LoadingSpinner from "../loading-spinner/loading-spinner.component";

export default function CsiResponseFormContainer() {
    const {t} = useTranslation();
    const [form] = Form.useForm();
    const searchParams = queryString.parse(useLocation().search);
    const {responseid} = searchParams;
    const {loading, error, data} = useQuery(QUERY_CSI_RESPONSE_BY_PK, {
        variables: {
            id: responseid,
        },
        skip: !!!responseid,
        fetchPolicy: "network-only",
        nextFetchPolicy: "network-only",
    });

    useEffect(() => {
        form.resetFields();
    }, [data, form]);

    if (!!!responseid)
        return (
            <Card>
                <Result title={t("csi.labels.noneselected")}/>
            </Card>
        );

    if (loading) return <LoadingSpinner/>;
    if (error) return <AlertComponent message={error.message} type="error"/>;

    return (
        <Card>
            <Form form={form} initialValues={data.csi_by_pk.response}>
                <ConfigFormComponents
                    readOnly
                    componentList={data.csi_by_pk.csiquestion.config}
                />
                {data.csi_by_pk.validuntil ? (
                    <>
                        {t("csi.fields.validuntil")}
                        {": "}
                        <DateFormatter>{data.csi_by_pk.validuntil}</DateFormatter>
                    </>
                ) : null}</Form>
        </Card>
    );
}