import React, { useState } from "react";
import { Table, Button, notification } from "antd";
import {
  WarningFilled,
  EyeInvisibleFilled,
  DeleteFilled,
  EditFilled
} from "@ant-design/icons";
import { useTranslation } from "react-i18next";
import Moment from "react-moment";
import NoteUpsertModal from "../note-upsert-modal/note-upsert-modal.container";

export default function JobNotesComponent({
  loading,
  data,
  refetch,
  deleteNote,
  jobId
}) {
  const { t } = useTranslation();
  const [noteModalVisible, setNoteModalVisible] = useState(false);
  const [existingNote, setExistingNote] = useState(null);
  const columns = [
    {
      title: "",
      dataIndex: "icons",
      key: "icons",
      width: 80,
      render: (text, record) => (
        <span>
          {" "}
          {record.critical ? (
            <WarningFilled style={{ margin: 4, color: "red" }} />
          ) : null}
          {record.private ? <EyeInvisibleFilled style={{ margin: 4 }} /> : null}
        </span>
      )
    },
    {
      title: t("notes.fields.text"),
      dataIndex: "text",
      key: "text",
      ellipsis: true
    },

    {
      title: t("notes.fields.updatedat"),
      dataIndex: "updated_at",
      key: "updated_at",
      defaultSortOrder: "descend",
      width: 200,
      sorter: (a, b) => new Date(a.updated_at) - new Date(b.updated_at),
      render: (text, record) => (
        <span>
          <Moment format="MM/DD/YYYY @ HH:mm">{record.updated_at}</Moment>
        </span>
      )
    },
    {
      title: t("notes.fields.createdby"),
      dataIndex: "created_by",
      key: "created_by",
      width: 200
    },
    {
      title: t("notes.actions.actions"),
      dataIndex: "actions",
      key: "actions",
      width: 150,
      render: (text, record) => (
        <span>
          <Button
            onClick={() => {
              deleteNote({
                variables: {
                  noteId: record.id
                }
              }).then(r => {
                refetch();
                notification["success"]({
                  message: t("notes.successes.deleted")
                });
              });
            }}
          >
            <DeleteFilled />
          </Button>
          <Button
            onClick={() => {
              setExistingNote(record);
              setNoteModalVisible(true);
            }}
          >
            <EditFilled />
          </Button>
        </span>
      )
    }
  ];

  return (
    <div>
      <NoteUpsertModal
        jobId={jobId}
        visible={noteModalVisible}
        changeVisibility={setNoteModalVisible}
        refetch={refetch}
        existingNote={existingNote}
      />
      <Button
        onClick={() => {
          setExistingNote(null);
          setNoteModalVisible(true);
        }}
      >
        {t("notes.actions.new")}
      </Button>
      <Table
        loading={loading}
        pagination={{ position: "bottom" }}
        columns={columns.map(item => ({ ...item }))}
        rowKey="id"
        dataSource={data}
      />
    </div>
  );
}
