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>
  );
}