import { Form, notification } from "antd";
import React from "react";
import { useMutation } from "@apollo/react-hooks";
import { useTranslation } from "react-i18next";
import { UPDATE_OWNER } from "../../graphql/owners.queries";
import OwnerDetailFormComponent from "./owner-detail-form.component";

function OwnerDetailFormContainer({ owner, refetch }) {
  const { t } = useTranslation();
  const [form] = Form.useForm();

  const [updateOwner] = useMutation(UPDATE_OWNER);

  const handleFinish = (values) => {
    updateOwner({
      variables: { ownerId: owner.id, owner: values },
    }).then((r) => {
      notification["success"]({
        message: t("owners.successes.save"),
      });
      //TODO Better way to reset the field decorators?
      if (refetch) refetch().then();
      // resetFields();
    });
  };

  return (
    <Form
      form={form}
      onFinish={handleFinish}
      autoComplete='off'
      layout='vertical'
      initialValues={owner}>
      <OwnerDetailFormComponent form={form} />
    </Form>
  );
}
export default OwnerDetailFormContainer;