import React, { useCallback, useState } from "react";

import {
  deleteAnnouncement,
  updateAnnouncementContent,
} from "actions/announcements";
import AnnouncementEditModal from "components/annoucements/AnnouncementEditModal";
import AnnouncementList from "components/annoucements/AnnouncementList";
import ModalConfirm from "components/modals/ModalConfirm";
import { AnnouncementStore } from "stores";

const AnnoucementsContainer = () => {
  const [itemToDelete, setItemToDelete] = useState(null);
  const [itemToEdit, setItemToEdit] = useState(null);
  const items = AnnouncementStore.useState((state) => state.items);

  const confirmEdit = useCallback(
    async (newContent) => {
      if (itemToEdit && newContent) {
        await updateAnnouncementContent.run({ item: itemToEdit, newContent });
        setItemToEdit(null);
      }
    },
    [itemToEdit, setItemToEdit]
  );

  const cancelEdit = useCallback(() => {
    setItemToEdit(null);
  }, [setItemToEdit]);

  const confirmDelete = useCallback(async () => {
    await deleteAnnouncement.run(itemToDelete);
    setItemToDelete(null);
  }, [setItemToDelete, itemToDelete]);

  const cancelDelete = useCallback(() => {
    setItemToDelete(null);
  }, [setItemToDelete]);

  return (
    <>
      <AnnouncementList
        items={items}
        displayActions={true}
        onDelete={setItemToDelete}
        onEdit={setItemToEdit}
      />
      <ModalConfirm
        isOpen={!!itemToDelete}
        onConfirm={confirmDelete}
        onCancel={cancelDelete}
        title="Opravdu chcete toto oznámení smazat?"
        yesActionLabel="Smazat"
      >
        Opravdu chcete ukončit rozpravu?
      </ModalConfirm>
      {itemToEdit && (
        <AnnouncementEditModal
          isOpen={true}
          announcement={itemToEdit}
          onConfirm={confirmEdit}
          onCancel={cancelEdit}
        />
      )}
    </>
  );
};

export default AnnoucementsContainer;