import { useMutation } from "@apollo/client";
import { Button, Card, Form, Input, Space } from "antd";
import React from "react";
import { useState } from "react";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { ACCEPT_NOTIFICATION } from "../../../graphql/notification.queries";
import { checkForNotification } from "../../../redux/user/user.actions";
const mapStateToProps = createStructuredSelector({
  //currentUser: selectCurrentUser
});
const mapDispatchToProps = (dispatch) => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
  checkForNotification: () => dispatch(checkForNotification()),
});
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(NotificationDisplayMolecule);

export function NotificationDisplayMolecule({
  notification,
  checkForNotification,
}) {
  const [acceptNotification] = useMutation(ACCEPT_NOTIFICATION);
  const [loading, setLoading] = useState(false);
  const handleConfirm = async (values) => {
    console.log("form submit", notification, values);
    setLoading(true);
    await acceptNotification({
      variables: {
        id: notification.id,
        notification: { acceptedby: values.acceptedby, acceptedat: new Date() },
      },
    });
    checkForNotification();
    setLoading(false);
  };
  const handleDismiss = async () => {};
  const [form] = Form.useForm();
  return (
    <Card>
      <div dangerouslySetInnerHTML={{ __html: notification.html }} />
      {notification.requiresconfirmation ? (
        <Form form={form} onFinish={handleConfirm}>
          <Space align="baseline">
            <Form.Item
              label="Acknowledged by"
              name="acceptedby"
              rules={[
                {
                  required: true,
                  message:
                    "Please enter your name to acknowledge and agree to the notice above.",
                },
              ]}
            >
              <Input />
            </Form.Item>
            <Button loading={loading} onClick={() => form.submit()}>
              Acknowledge
            </Button>
          </Space>
        </Form>
      ) : (
        <Button onClick={handleDismiss}>Dismiss</Button>
      )}
    </Card>
  );
}
