import React, { useState } from "react";

import { DropdownMenu, DropdownMenuItem } from "components/dropdown-menu";
import ModalConfirm from "components/modals/ModalConfirm";
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";

const Home = () => {
  const [showEndDiscussionConfirm, setShowEndDiscussionConfirm] = useState(
    false
  );

  const onRenameProgramPoint = () => {
    console.log("renameProgramPoint");
  };
  const onEndDiscussion = () => {
    console.log("endDiscussion");
    setShowEndDiscussionConfirm(true);
  };
  const onEndProgramPoint = () => {
    console.log("endProgramPoint");
  };

  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 č. 1: Programové priority Pirátské strany pro sněmovní volby
              2021
            </h1>
            <DropdownMenu right triggerSize="lg">
              <DropdownMenuItem
                onClick={onRenameProgramPoint}
                icon="ico--edit-pencil"
                title="Přejmenovat bod programu"
                titleSize="base"
                iconSize="base"
              />
              <DropdownMenuItem
                onClick={onEndDiscussion}
                icon="ico--bubbles"
                title="Ukončit rozpravu"
                titleSize="base"
                iconSize="base"
              />
              <DropdownMenuItem
                onClick={onEndProgramPoint}
                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" />
            <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" />
          <AddPostForm className="my-8 space-y-4" />
        </section>
      </article>
      <ModalConfirm
        isOpen={showEndDiscussionConfirm}
        onConfirm={() => setShowEndDiscussionConfirm(false)}
        onCancel={() => setShowEndDiscussionConfirm(false)}
        title="Ukončit rozpravu?"
        yesActionLabel="Ukončit"
      >
        Opravdu chcete ukončit rozpravu?
      </ModalConfirm>
    </>
  );
};

export default Home;