import React, { useState } from "react";
import { format } from "date-fns";

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 NotYetStarted = ({ startAt }) => (
  <article className="container container--wide py-8 md:py-16 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">
      <span>Jednání celostátního fóra ještě nezačalo. </span>
      {startAt && (
        <span>
          Mělo by být zahájeno <strong>{format(startAt, "d. M. Y")}</strong> v{" "}
          <strong>{format(startAt, "H:mm")}</strong>.{" "}
        </span>
      )}
      <span>Můžete si ale zobrazit program.</span>
    </p>
    <Button routerTo="/program" className="md:text-lg lg:text-xl" hoverActive>
      Zobrazit program
    </Button>
  </article>
);

const AlreadyFinished = () => (
  <article className="container container--wide py-8 md:py-16 lg:py-32">
    <div className="flex">
      <div>
        <i className="ico--anchor text-2xl md:text-6xl lg:text-9xl mr-4 lg:mr-8"></i>
      </div>
      <div>
        <h1 className="head-alt-base md:head-alt-md lg:head-alt-xl mb-2">
          Jednání už skočilo!
        </h1>
        <p className="text-xl leading-snug">
          Oficiální program již skončil. Těšíme se na viděnou zase příště.
        </p>
      </div>
    </div>
  </article>
);

const BreakInProgress = () => (
  <article className="container container--wide py-8 md:py-16 lg:py-32">
    <div className="flex">
      <div>
        <i className="ico--clock text-2xl md:text-6xl lg:text-9xl mr-4 lg:mr-8"></i>
      </div>
      <div>
        <h1 className="head-alt-base md:head-alt-md lg:head-alt-xl mb-2">
          Probíhá přestávka ...
        </h1>
        <p className="text-xl leading-snug mb-8">
          Jednání celostátního fóra je momentálně přerušeno. Můžete si ale
          zobrazit program.
        </p>
        <Button
          routerTo="/program"
          className="md:text-lg lg:text-xl"
          hoverActive
        >
          Zobrazit program
        </Button>
      </div>
    </div>
  </article>
);

const Home = () => {
  const {
    currentId,
    items: programEntries,
    scheduleIds,
  } = ProgramStore.useState();
  const { isAuthenticated, user } = AuthStore.useState();
  const programEntry = currentId ? programEntries[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, programEntry);

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

  const firstProgramEntry = scheduleIds.length
    ? programEntries[scheduleIds[0]]
    : null;

  const lastProgramEntry = scheduleIds.length
    ? programEntries[scheduleIds[0]]
    : null;

  if (!programEntry && new Date() < firstProgramEntry.expectedStartAt) {
    return <NotYetStarted startAt={firstProgramEntry.expectedStartAt} />;
  }

  if (!programEntry && new Date() > lastProgramEntry.expectedStartAt) {
    return <AlreadyFinished />;
  }

  if (!programEntry) {
    return <BreakInProgress />;
  }

  const displayActions = isAuthenticated && user.role === "chairman";

  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>
            {displayActions && (
              <DropdownMenu right triggerSize="lg" className="pl-4">
                <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">
              <span>Příspěvky v rozpravě</span>
              {!programEntry.discussionOpened && (
                <i
                  className="ico--lock text-black ml-1 opacity-50 hover:opacity-100 transition duration-500 text-xl"
                  title="Rozprava je uzavřena"
                />
              )}
              {programEntry.discussionOpened && (
                <i
                  className="ico--lock-open text-black ml-1 opacity-50 hover:opacity-100 transition duration-500 text-xl"
                  title="Probíhá rozprava"
                />
              )}
            </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;