import Icon from "@ant-design/icons";
import { useMutation } from "@apollo/client";
import { Button, Input, Popover, Space } from "antd";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { FaRegStickyNote } from "react-icons/fa";
import { logImEXEvent } from "../../firebase/firebase.utils";
import { UPDATE_JOB } from "../../graphql/jobs.queries";
import { setModalContext } from "../../redux/modals/modals.actions";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";

const mapStateToProps = createStructuredSelector({});

const mapDispatchToProps = (dispatch) => ({
  setNoteUpsertContext: (context) => dispatch(setModalContext({ context: context, modal: "noteUpsert" }))
});

function ProductionListColumnProductionNote({ record, setNoteUpsertContext }) {
  const { t } = useTranslation();

  const [note, setNote] = useState((record.production_vars && record.production_vars.note) || "");

  const [open, setOpen] = useState(false);

  const [updateAlert] = useMutation(UPDATE_JOB);

  const handleSaveNote = (e) => {
    logImEXEvent("production_add_note");
    e.stopPropagation();
    setOpen(false);
    updateAlert({
      variables: {
        jobId: record.id,
        job: {
          production_vars: {
            ...record.production_vars,
            note: note
          }
        }
      }
    }).then(() => {
      if (record.refetch) record.refetch();
    });
  };

  const handleChange = (e) => {
    e.stopPropagation();
    setNote(e.target.value);
  };

  const handleOpenChange = (flag) => {
    setOpen(flag);
    if (flag) setNote((record.production_vars && record.production_vars.note) || "");
  };

  return (
    <Popover
      onOpenChange={handleOpenChange}
      open={open}
      content={
        <div style={{ width: "30em" }}>
          <Input.TextArea
            rows={5}
            value={note}
            onChange={handleChange}
            // onPressEnter={handleSaveNote}
            autoFocus
            allowClear
            style={{ marginBottom: "1em" }}
          />
          <Space>
            <Button onClick={handleSaveNote} type="primary">
              {t("general.actions.save")}
            </Button>
            <Button
              onClick={() => {
                setOpen(false);
                setNoteUpsertContext({
                  context: {
                    jobId: record.id,
                    text: note
                  }
                });
              }}
            >
              {t("notes.actions.savetojobnotes")}
            </Button>
          </Space>
        </div>
      }
      trigger={["click"]}
    >
      <div
        style={{
          width: "100%",
          height: "19px",
          cursor: "pointer",
          overflow: "hidden",
          textOverflow: "ellipsis"
        }}
      >
        <Icon component={FaRegStickyNote} style={{ marginRight: ".2rem" }} />
        {(record.production_vars && record.production_vars.note) || " "}
      </div>
    </Popover>
  );
}

export default connect(mapStateToProps, mapDispatchToProps)(ProductionListColumnProductionNote);
