import React, { useState } from "react";

import {
  closeDiscussion,
  endProgramPoint,
  openDiscussion,
  renameProgramPoint,
} from "actions/program";
import Button from "components/Button";
import { DropdownMenu, DropdownMenuItem } from "components/dropdown-menu";
import ModalConfirm from "components/modals/ModalConfirm";
import ProgramEntryEditModal from "components/program/ProgramEntryEditModal";
import AddAnnouncementForm from "containers/AddAnnouncementForm";
import AddPostForm from "containers/AddPostForm";
import AnnouncementsContainer from "containers/AnnoucementsContainer";
import PostFilters from "containers/PostFilters";
import PostsContainer from "containers/PostsContainer";
import { useActionConfirm } from "hooks";
import { AuthStore, ProgramStore } from "stores";

const noprogramEntryDiscussion = (
  <article className="container container--wide pt-8 py-8 lg:py-32">
    <div className="hidden md:inline-block flag bg-violet-400 text-white head-alt-base mb-4 py-4 px-5">
      Jejda ...
    </div>
    <h1 className="head-alt-base md:head-alt-md lg:head-alt-xl mb-2">
      Jednání ještě nebylo zahájeno :(
    </h1>
    <p className="text-xl leading-snug mb-8">
      Jednání celostátního fóra v tuto chvíli neprobíhá. Můžete si ale zobrazit
      program.
    </p>
    <Button routerTo="/program" className="md:text-lg lg:text-xl" hoverActive>
      Zobrazit program
    </Button>
  </article>
);

const Home = () => {
  const { currentId, items } = ProgramStore.useState();
  const { isAuthenticated, user } = AuthStore.useState();
  const programEntry = currentId ? items[currentId] : null;
  const [showProgramEditModal, setShowProgramEditModal] = useState(false);
  const [
    showCloseDiscussion,
    setShowCloseDiscussion,
    onCloseDiscussionConfirm,
    onCloseDiscussionCancel,
  ] = useActionConfirm(closeDiscussion, programEntry);
  const [
    showOpenDiscussion,
    setShowOpenDiscussion,
    onOpenDiscussionConfirm,
    onOpenDiscussionCancel,
  ] = useActionConfirm(openDiscussion, programEntry);
  const [
    showEndProgramPoint,
    setShowEndProgramPoint,
    onEndProgramPointConfirm,
    onEndProgramPointCancel,
  ] = useActionConfirm(endProgramPoint);

  const onEditProgramConfirm = async (newTitle) => {
    await renameProgramPoint.run({ programEntry, newTitle });
    setShowProgramEditModal(false);
  };
  const onEditProgramCancel = () => {
    setShowProgramEditModal(false);
  };

  if (!programEntry) {
    return noprogramEntryDiscussion;
  }

  return (
    <>
      <article className="container container--wide pt-8 lg:py-24 cf2021">
        <section className="cf2021__video space-y-8">
          <div className="flex items-center justify-between mb-4 lg:mb-8">
            <h1 className="head-alt-md lg:head-alt-lg mb-0">
              Bod č. {programEntry.number}: {programEntry.title}
            </h1>
            <DropdownMenu right triggerSize="lg">
              <DropdownMenuItem
                onClick={() => setShowProgramEditModal(true)}
                icon="ico--edit-pencil"
                title="Přejmenovat bod programu"
                titleSize="base"
                iconSize="base"
              />
              {programEntry.discussionOpened && (
                <DropdownMenuItem
                  onClick={() => setShowCloseDiscussion(true)}
                  icon="ico--bubbles"
                  title="Ukončit rozpravu"
                  titleSize="base"
                  iconSize="base"
                />
              )}
              {!programEntry.discussionOpened && (
                <DropdownMenuItem
                  onClick={() => setShowOpenDiscussion(true)}
                  icon="ico--bubbles"
                  title="Otevřít rozpravu"
                  titleSize="base"
                  iconSize="base"
                />
              )}
              <DropdownMenuItem
                onClick={() => setShowEndProgramPoint(true)}
                icon="ico--switch"
                title="Ukončit bod programu"
                titleSize="base"
                iconSize="base"
              />
              )}
            </DropdownMenu>
          </div>

          <iframe
            width="100%"
            height="500"
            src="https://www.youtube.com/embed/73jJLspL8o8"
            frameBorder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowFullScreen=""
            title="Video stream"
          ></iframe>
        </section>

        <section className="cf2021__notifications">
          <div className="lg:card lg:elevation-10">
            <div className="lg:card__body pb-2 lg:py-6">
              <h2 className="head-heavy-sm">Oznámení</h2>
            </div>

            <AnnouncementsContainer className="container-padding--zero lg:container-padding--auto" />
            {isAuthenticated && user.role === "chairman" && (
              <AddAnnouncementForm className="lg:card__body pt-4 lg:py-6" />
            )}
          </div>
        </section>

        <section className="cf2021__posts">
          <div className="flex flex-col xl:flex-row xl:justify-between xl:items-center mb-4">
            <h2 className="head-heavy-sm whitespace-no-wrap">
              Příspěvky v rozpravě
            </h2>
            <PostFilters />
          </div>

          <PostsContainer className="container-padding--zero lg:container-padding--auto" />
          {programEntry.discussionOpened && isAuthenticated && (
            <AddPostForm className="my-8 space-y-4" />
          )}
        </section>
      </article>
      <ProgramEntryEditModal
        isOpen={showProgramEditModal}
        onConfirm={onEditProgramConfirm}
        onCancel={onEditProgramCancel}
        programEntry={programEntry}
      />
      <ModalConfirm
        isOpen={showCloseDiscussion}
        onConfirm={onCloseDiscussionConfirm}
        onCancel={onCloseDiscussionCancel}
        title="Ukončit rozpravu?"
        yesActionLabel="Ukončit"
      >
        Opravdu chcete ukončit rozpravu?
      </ModalConfirm>
      <ModalConfirm
        isOpen={showOpenDiscussion}
        onConfirm={onOpenDiscussionConfirm}
        onCancel={onOpenDiscussionCancel}
        title="Otevřít rozpravu?"
        yesActionLabel="Otevřít"
      >
        Opravdu chcete otevřít rozpravu k tomuto bodu programu?
      </ModalConfirm>
      <ModalConfirm
        isOpen={showEndProgramPoint}
        onConfirm={onEndProgramPointConfirm}
        onCancel={onEndProgramPointCancel}
        title="Ukončit bod programu?"
        yesActionLabel="Ukončit bod programu"
      >
        Bod programu <strong>bude ukončen</strong>. Opravdu to chcete?
      </ModalConfirm>
    </>
  );
};

export default Home;