import React, { useState } from 'react';
import { CalendarEvent } from '../store/calendar.types';
import cx from 'classnames';
import { Menu, Paragraph } from 'app/shared/components/text/text';
import datePipe from 'app/shared/pipes/date.pipe';

export interface Props {
  event: CalendarEvent;
  past?: boolean;
}

const getTimeRange = (startDate: string, endDate: string | null) => {
  return `${datePipe.getHourFromStringDate(startDate)}${endDate ? '-' + datePipe.getHourFromStringDate(endDate) : ''} (CET)`;
};

const CalendarListItem = ({ event, past } : Props) => {
  const { title, description, date, endDate, fileName, fileUrl } = event;
  const [ isOnLink, setOnLinkFlag ] = useState(false);
  const containerClassName = cx('c-calendar-list-item',
    { 'c-calendar-list-item--past': past },
  );
  const downloadClassName = cx('c-calendar-list-item__download',
    { 'c-calendar-list-item__download--past': past },
  );
  const fileClassName = cx('u-font--clear-spacings',
    { 'u-color--dark-grey' : past },
  );
  const titleClassName = cx('u-font--clear-spacings', 'u-margin-bottom--tiny',
    { 'u-color--dark-grey' : past }
  );
  const dateClassName = cx(' u-uppercase', 'u-margin-top--tiny', 'u-margin-lg-top--none', 'c-calendar-list-item__date-item',
    { 'c-calendar-list-item__date-item--past': past },
  );

  const handleLinkEnter = () => {
    setOnLinkFlag(true);
  };
  const handeLinkLeave = () => {
    setOnLinkFlag(false);
  };

  return <div className={containerClassName}>
    <div className="c-calendar-list-item__container o-layout o-layout--aligned">
      <div className={`c-calendar-list-item__date${past ? '--past' : ''}`}>
        <Paragraph
          extraClass={dateClassName}
          size="small"
          bold
        >
          {datePipe.formatTimeZoneInvariantDate(date)}
        </Paragraph>
        <Menu extraClass="c-calendar-list-item__date-item--time u-color--dark-grey u-margin-top--tiny">
          <span className="c-calendar-list-item__date-item--separator">
            |
          </span>
          {getTimeRange(date, endDate)}
        </Menu>
      </div>
      <div className="c-calendar-list-item__content">
        <Paragraph extraClass={titleClassName}>
          {title}
        </Paragraph>
        {description !== null && <div className="c-calendar-list-item__description" dangerouslySetInnerHTML={{ __html: description }} />}
        {fileName && <div
          className="u-margin-top--small u-display--inline-block u-position--relative"
          onMouseEnter={handleLinkEnter}
          onMouseLeave={handeLinkLeave}
        >
          <Paragraph extraClass={fileClassName} size="small">
            <i className="icon-clip u-margin-right--small"/>{fileName}
          </Paragraph>
          {isOnLink && <a href={fileUrl ?? undefined} target="_blank" download rel="noreferrer">
            <div className={downloadClassName}>
              <Paragraph size='small' extraClass='u-font--clear-spacings'>
                <i className='icon-download-2 u-margin-right--small' />Download
              </Paragraph>
            </div>
          </a>}
        </div>}
      </div>
    </div>
  </div>;
};

export default CalendarListItem;