import React from 'react';
import PropTypes from 'prop-types';
import { defineMessages, useIntl } from 'react-intl';
import moment from 'moment';
import cx from 'classnames';
import {
  Card,
  CardBody,
  CardTitle,
  CardText,
  CardReadMore,
} from 'design-react-kit';
import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';

import {
  getItemIcon,
  getCalendarDate,
  getEventRecurrenceMore,
  getComponentWithFallback,
} from 'io-sanita-theme/helpers';
import { CardCategoryBottom } from 'io-sanita-theme/components';
import { ListingText } from 'io-sanita-theme/components/Blocks';
import { BadgeStatusServizio } from 'io-sanita-theme/components/View/Servizio';

import { CardCategoryTop } from 'io-sanita-theme/components';
import 'io-sanita-theme/components/Cards/CardSimple/cardSimple.scss';

const messages = defineMessages({
  card_detail_label: { id: 'Card detail label', defaultMessage: 'Vedi' },
  publication_date: {
    id: 'publication_date',
    defaultMessage: 'Data di pubblicazione',
  },
  update_date: {
    id: 'update_date',
    defaultMessage: 'Data di aggiornamento',
  },
});

const SimpleCardDefault = (props) => {
  const intl = useIntl();

  moment.locale(intl.locale);

  const {
    item,
    isEditMode,
    show_icon = false,
    show_description = true,
    show_detail_link,
    show_category = true,
    detail_link_label,
    hide_dates,
    id_lighthouse,
    rrule,
    index,
  } = props;

  const getItemClass = (item) => {
    let className = '';
    switch (item['@type']) {
      case 'News Item':
        className =
          item.tipologia_notizia
            ?.map?.((tipologia) => {
              return (
                typeof tiplogia === 'object' ? tipologia.token : tipologia
              )
                ?.toLowerCase()
                ?.replace(' ', '_');
            })
            .join(' ') ?? '';
        break;
      default:
        className = '';
        break;
    }
    return className;
  };

  const icon = show_icon ? getItemIcon(item) : null;
  const itemTitle = item.title || item.id;
  const date = hide_dates ? null : getCalendarDate(item, rrule.rrulestr);
  const eventRecurrenceMore = hide_dates
    ? null
    : getEventRecurrenceMore(item, isEditMode);
  const listingText = show_description ? <ListingText item={item} /> : null;

  const type = item['@type'];

  const BlockExtraTags = getComponentWithFallback({
    name: 'BlockExtraTags',
    dependencies: ['SimpleCardDefault', type],
  }).component;

  return (
    <Card
      className={`align-items-top rounded shadow no-after ${getItemClass(
        item,
      )} card-simple simple-card-default-item`}
      key={index}
    >
      <CardBody
        className={cx('', {
          'pb-5': show_detail_link || eventRecurrenceMore,
        })}
      >
        <div className="card-body-main">
          {icon && <CardCategoryTop iconName={icon} />}
          <CardTitle tag="h3">
            <UniversalLink
              item={!isEditMode ? item : null}
              href={isEditMode ? '#' : null}
              data-element={id_lighthouse}
              tabIndex={0}
              className="card-title-link"
            >
              {itemTitle}
            </UniversalLink>
          </CardTitle>

          {/* Chip servizio attivo */}
          <BadgeStatusServizio item={item} wrapperClassName="mb-3" />
          {listingText && (
            <CardText className={cx('', { 'mb-5': eventRecurrenceMore })}>
              {listingText}
              {(type === 'Modulo' || type === 'Documento') && !hide_dates && (
                <div className="document-date mt-3">
                  {item?.effective && (
                    <p className="mb-0">
                      <strong>
                        {intl.formatMessage(messages.publication_date)}:{' '}
                      </strong>
                      {moment(item.effective).format('DD-MM-YYYY')}
                    </p>
                  )}
                  {item?.modified && (
                    <p className="mb-0">
                      <strong>
                        {intl.formatMessage(messages.update_date)}:{' '}
                      </strong>
                      {moment(item.modified).format('DD-MM-YYYY')}
                    </p>
                  )}
                </div>
              )}
            </CardText>
          )}
          <BlockExtraTags {...props} item={item} itemIndex={index} />
          {eventRecurrenceMore}
        </div>
        <CardCategoryBottom
          item={item}
          date={date}
          isEditMode={isEditMode}
          showCategory={show_category}
        />

        {show_detail_link && (
          <CardReadMore
            iconName="it-arrow-right"
            tag={UniversalLink}
            item={!isEditMode ? item : null}
            href={isEditMode ? '#' : null}
            text={
              detail_link_label ||
              intl.formatMessage(messages.card_detail_label)
            }
            aria-hidden="true"
          />
        )}
      </CardBody>
    </Card>
  );
};

SimpleCardDefault.propTypes = {
  item: PropTypes.any.isRequired,
  isEditMode: PropTypes.bool,
};

export default injectLazyLibs(['rrule'])(SimpleCardDefault);