import { Input, Modal, Switch } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";

export default function NoteUpsertModalComponent({
  visible,
  changeVisibility,
  noteState,
  setNoteState,
  updateExistingNote,
  insertNewNote
}) {
  const { t } = useTranslation();

  return (
    <Modal
      title={noteState.id ? t("notes.actions.edit") : t("notes.actions.new")}
      visible={visible}
      okText={t("general.labels.save")}
      onOk={() => {
        noteState.id ? updateExistingNote() : insertNewNote();
      }}
      onCancel={() => {
        changeVisibility(false);
      }}
    >
      <div>
        {t("notes.fields.critical")}
        <Switch
          title={t("notes.fields.critical")}
          checked={noteState.critical}
          onChange={checked => {
            setNoteState({ ...noteState, critical: checked });
          }}
        />
      </div>
      <div>
        {t("notes.fields.private")}
        <Switch
          title={t("notes.fields.private")}
          checked={noteState.private}
          onChange={checked => {
            setNoteState({ ...noteState, private: checked });
          }}
        />
      </div>

      <Input.TextArea
        rows={8}
        value={noteState.text}
        placeholder={t("notes.labels.newnoteplaceholder")}
        onChange={e => {
          setNoteState({ ...noteState, text: e.target.value });
        }}
      />
    </Modal>
  );
}
