import { Form, notification } from "antd";
import React from "react";
import { useMutation } from "react-apollo";
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"
      initialValues={owner}
    >
      <OwnerDetailFormComponent form={form} />
    </Form>
  );
}
export default OwnerDetailFormContainer;
