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

import {
  deleteAnnouncement,
  loadAnnouncements,
  markSeen,
  updateAnnouncement,
} from "actions/announcements";
import AnnouncementEditModal from "components/annoucements/AnnouncementEditModal";
import AnnouncementList from "components/annoucements/AnnouncementList";
import { CardBody } from "components/cards";
import ErrorMessage from "components/ErrorMessage";
import ModalConfirm from "components/modals/ModalConfirm";
import { useActionState, useItemActionConfirm } from "hooks";
import { AnnouncementStore, AuthStore } from "stores";

const AnnoucementsContainer = ({ className }) => {
  const [itemToEdit, setItemToEdit] = useState(null);
  const [confirmingEdit, setConfirmingEdit] = useState(false);
  const [editError, setEditError] = useState(null);
  const { 2: loadResult } = loadAnnouncements.useWatch();

  const [
    itemToDelete,
    setItemToDelete,
    onDeleteConfirm,
    onDeleteCancel,
  ] = useItemActionConfirm(deleteAnnouncement);

  const [deletingAnnouncement, deletingAnnouncementError] = useActionState(
    deleteAnnouncement,
    itemToDelete
  );

  const { isAuthenticated, user } = AuthStore.useState();
  const items = AnnouncementStore.useState((state) =>
    state.itemIds.map((id) => state.items[id])
  );

  const confirmEdit = useCallback(
    async (payload) => {
      if (itemToEdit && payload) {
        setConfirmingEdit(true);

        const result = await updateAnnouncement.run({
          item: itemToEdit,
          payload,
        });

        if (!result.error) {
          setItemToEdit(null);
          setEditError(null);
        } else {
          setEditError(result.message);
        }

        setConfirmingEdit(false);
      }
    },
    [itemToEdit, setItemToEdit]
  );

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

  return (
    <div className={className}>
      {loadResult && loadResult.error && (
        <CardBody>
          <ErrorMessage>
            Oznámení se nepodařilo načíst: {loadResult.message}
          </ErrorMessage>
        </CardBody>
      )}
      <AnnouncementList
        items={items}
        canRunActions={isAuthenticated && user.role === "chairman"}
        onDelete={setItemToDelete}
        onEdit={setItemToEdit}
        onSeen={markSeen}
      />
      <ModalConfirm
        isOpen={!!itemToDelete}
        onConfirm={onDeleteConfirm}
        onCancel={onDeleteCancel}
        confirming={deletingAnnouncement}
        error={deletingAnnouncementError}
        title="Opravdu smazat?"
        yesActionLabel="Smazat"
      >
        Tato akce je nevratná. Opravdu chcete toto oznámení smazat?
      </ModalConfirm>
      {itemToEdit && (
        <AnnouncementEditModal
          isOpen={true}
          announcement={itemToEdit}
          onConfirm={confirmEdit}
          onCancel={cancelEdit}
          confirming={confirmingEdit}
          error={editError}
        />
      )}
    </div>
  );
};

export default AnnoucementsContainer;