import React from "react";
import { Link } from "react-router-dom";
import classNames from "classnames";
import { format } from "date-fns";

import { activateProgramPoint } from "actions/program";
import Button from "components/Button";
import Chip from "components/Chip";
import ModalConfirm from "components/modals/ModalConfirm";
import { useActionState, useItemActionConfirm } from "hooks";
import { AuthStore, ProgramStore } from "stores";

const Schedule = () => {
  const { isAuthenticated, user } = AuthStore.useState();
  const { currentId, scheduleIds, items } = ProgramStore.useState();
  const [
    entryToActivate,
    setEntryToActivate,
    onActivateConfirm,
    onActivateCancel,
  ] = useItemActionConfirm(activateProgramPoint);

  const [activating, activationError] = useActionState(
    activateProgramPoint,
    entryToActivate
  );

  return (
    <article className="container container--wide py-8 lg:py-24">
      <h1 className="head-alt-md lg:head-alt-lg mb-8">Program zasedání</h1>
      <div className="flex flex-col">
        {scheduleIds.map((id) => {
          const isCurrent = id === currentId;
          const entry = items[id];
          return (
            <div
              className={classNames(
                "flex flex-col md:flex-row my-4 hover:opacity-100 transition duration-300",
                {
                  "text-black": isCurrent,
                  "text-black opacity-50": !isCurrent,
                }
              )}
              key={entry.id}
            >
              <div className="w-28 md:text-right">
                {isCurrent && (
                  <Chip condensed className="mt-2 mr-2" color="red-600">
                    Právě probíhá
                  </Chip>
                )}
              </div>
              <div className="w-full md:w-32 flex flex-row md:flex-col items-center md:items-stretch md:text-right md:pr-8">
                <p className="head-heavy-xs md:head-heavy-base">
                  {format(entry.expectedStartAt, "H:mm")}
                </p>
                <p className="ml-auto md:ml-0 head-heavy-xs md:head-heavy-xs md:text-grey-200 whitespace-no-wrap">
                  {format(entry.expectedStartAt, "d. M. Y")}
                </p>
              </div>
              <div className="flex-grow w-full">
                <h2 className="head-heavy-xs md:head-heavy-base mb-1">
                  {isCurrent && <Link to="/">{entry.title}</Link>}
                  {!isCurrent && entry.title}
                </h2>
                <div className="flex space-x-2">
                  <strong>Navrhovatel:</strong>
                  <span>{entry.proposer}</span>
                </div>
                {entry.description && (
                  <p className="mt-2 leading-tight max-w-3xl">
                    {entry.description}
                  </p>
                )}
                {isAuthenticated &&
                  user.role === "chairman" &&
                  entry.id !== currentId && (
                    <div className="mt-4">
                      <Button
                        onClick={() => setEntryToActivate(entry)}
                        color="grey-125"
                        className="text-xs"
                      >
                        Aktivovat tento bod programu
                      </Button>
                    </div>
                  )}
              </div>
            </div>
          );
        })}
      </div>
      <ModalConfirm
        isOpen={!!entryToActivate}
        onConfirm={onActivateConfirm}
        onCancel={onActivateCancel}
        confirming={activating}
        error={activationError}
        title="Aktivovat bod programu?"
        yesActionLabel="Aktivovat"
      >
        Pogramovaný bod{" "}
        <strong>{entryToActivate && entryToActivate.title}</strong> bude
        aktivován. Chcete pokračovat?
      </ModalConfirm>
    </article>
  );
};

export default Schedule;