import React from 'react';
import cx from 'classnames';
import PropTypes from 'prop-types';
import { defineMessages, useIntl } from 'react-intl';
import {
  Container,
  Row,
  Col,
  Card,
  CardBody,
  CardTitle,
  CardReadMore,
} from 'design-react-kit';
import { UniversalLink } from '@plone/volto/components';

import {
  ListingText,
  ListingLinkMore,
} from 'design-comuni-plone-theme/components/ItaliaTheme';
import { viewDate } from 'design-comuni-plone-theme/helpers';

import { BandoStatus } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
import { getVariationPropsDefaults } from 'design-comuni-plone-theme/config/Blocks/ListingOptions/utils';

const messages = defineMessages({
  vedi: {
    id: 'bando_vedi',
    defaultMessage: 'Vedi',
  },
  pubblicazione: {
    id: 'bando_data_pubblicazione',
    defaultMessage: 'Pubblicato il',
  },
  scadenza: {
    id: 'bando_scadenza',
    defaultMessage: 'Scadenza partecipazione',
  },
  chiusura_procedimento: {
    id: 'chiusura_procedimento_bando',
    defaultMessage: 'Chiusura del procedimento',
  },
  stato: {
    id: 'bando_stato',
    defaultMessage: 'Stato:',
  },
  ente: {
    id: 'bando_ente',
    defaultMessage: 'Ente',
  },
  tipologia: {
    id: 'bando_tipologia',
    defaultMessage: 'Tipo',
  },
});

const BandiInEvidenceTemplate = (props) => {
  const defaultVariationProps = getVariationPropsDefaults(
    'bandiInEvidenceTemplate',
  );
  const {
    items,
    title,
    isEditMode,
    show_block_bg,
    show_ente,
    show_tipologia,
    show_description,
    show_cig = true,
    linkAlign,
    linkTitle,
    linkHref,
    titleLine,
    linkmore_id_lighthouse,
    wrap_title = defaultVariationProps.wrap_title,
  } = props;

  const intl = useIntl();
  return (
    <div className="bandi-in-evidence">
      <Container className="px-4 pt-3">
        {title && (
          <Row>
            <Col>
              <h2
                className={cx('mb-4', {
                  'mt-5': !show_block_bg,
                  'title-bottom-line': titleLine,
                })}
              >
                {title}
              </h2>
            </Col>
          </Row>
        )}

        <Row className={cx({ 'pb-3': show_block_bg })}>
          {items.map((item, index) => {
            const listingText = <ListingText item={item} />;
            return (
              <Col lg={4} sm={6} xs={12} key={index} className="pb-3">
                <Card key={index} className="listing-item card-bg mt-2">
                  <CardBody>
                    <CardTitle
                      tag={title ? 'h3' : 'h2'}
                      className={cx('title', { 'wrap-title': wrap_title })}
                    >
                      <UniversalLink
                        className={cx('bando-title', {
                          'wrap-title': wrap_title,
                        })}
                        item={!isEditMode ? item : null}
                        href={isEditMode ? '#' : null}
                      >
                        {item.title || item.id}
                      </UniversalLink>
                    </CardTitle>

                    {show_description && listingText && (
                      <div className="bando-description">{listingText}</div>
                    )}
                    <div className="bando-lower-section">
                      <div className="bando-dati mb-2">
                        {/* Ente */}
                        {show_ente && item.ente_bando?.length > 0 && (
                          <span className="d-flex flex-wrap align-items-baseline bando-dati-info">
                            <div className="bando-dati-label me-2">
                              {intl.formatMessage(messages.ente)}:
                            </div>
                            <span className="bando-dati-date">
                              {item.ente_bando.map((ente, i) => (
                                <span>
                                  {ente}
                                  {i < item.ente_bando.length - 1 ? ', ' : ''}
                                </span>
                              ))}
                            </span>
                          </span>
                        )}

                        {/* Tipologia */}
                        {show_tipologia && item?.tipologia_bando && (
                          <span className="d-flex flex-wrap align-items-baseline bando-dati-info">
                            <div className="bando-dati-label me-2">
                              {intl.formatMessage(messages.tipologia)}:
                            </div>
                            <span className="bando-dati-date">
                              {item.tipologia_bando_label}
                            </span>
                          </span>
                        )}

                        {/* Pubblicazione */}
                        {item.effective && (
                          <span className="d-flex flex-wrap align-items-baseline bando-dati-info">
                            <div className="bando-dati-label me-2">
                              {intl.formatMessage(messages.pubblicazione)}:
                            </div>
                            <span className="bando-dati-date">
                              {viewDate(
                                intl.locale,
                                item.effective,
                                'DD-MM-YYYY',
                              )}
                            </span>
                          </span>
                        )}

                        {/* Scadenza */}
                        {item.scadenza_bando && (
                          <span className="d-flex flex-wrap align-items-baseline bando-dati-info">
                            <div className="bando-dati-label me-2">
                              {intl.formatMessage(messages.scadenza)}:
                            </div>
                            <span className="bando-dati-date">
                              {item.scadenza_bando &&
                                viewDate(
                                  intl.locale,
                                  item.scadenza_bando,
                                  'DD-MM-YYYY',
                                )}
                            </span>
                          </span>
                        )}

                        {/* Chiusura procedimento */}
                        {item.chiusura_procedimento_bando && (
                          <span className="d-flex flex-wrap align-items-baseline bando-dati-info">
                            <div className="bando-dati-label me-2">
                              {intl.formatMessage(
                                messages.chiusura_procedimento,
                              )}
                              :
                            </div>
                            <span className="bando-dati-date">
                              {item.chiusura_procedimento_bando &&
                                viewDate(
                                  intl.locale,
                                  item.chiusura_procedimento_bando,
                                  'DD-MM-YYYY',
                                )}
                            </span>
                          </span>
                        )}

                        {/* Stato */}
                        {item?.bando_state?.length > 0 && (
                          <span className="d-flex align-items-baseline bando-dati-info">
                            <div className="bando-dati-label me-3">
                              {intl.formatMessage(messages.stato)}:
                            </div>

                            <span className="bando-dati-date">
                              <div
                                className={cx('bando-state', {
                                  open: item.bando_state?.includes('open'),
                                  closed: item.bando_state?.includes('closed'),
                                  scheduled:
                                    item.bando_state?.includes('scheduled'),
                                  'in-progress':
                                    item.bando_state?.includes('inProgress'),
                                })}
                              >
                                <BandoStatus content={item} />
                              </div>
                            </span>
                          </span>
                        )}

                        {/* cig */}
                        {show_cig && item.cig && (
                          <span className="d-flex flex-wrap align-items-baseline bando-dati-info">
                            <div className="bando-dati-label me-2">CIG:</div>
                            <span className="bando-dati-date">{item.cig}</span>
                          </span>
                        )}

                        {/* Note aggiornamenti */}
                        {item.update_note &&
                          (item.bando_state?.includes('open') ||
                            item.bando_state?.includes('inProgress')) && (
                            <span className="d-flex bando-note">
                              <strong>{item.update_note}</strong>
                            </span>
                          )}
                      </div>
                      <div className="read-more">
                        <CardReadMore
                          iconName="it-arrow-right"
                          tag={UniversalLink}
                          item={!isEditMode ? item : null}
                          href={isEditMode ? '#' : null}
                          text={intl.formatMessage(messages.vedi)}
                          aria-hidden="true"
                          tabindex="-1"
                        />
                      </div>
                    </div>
                  </CardBody>
                </Card>
              </Col>
            );
          })}
        </Row>

        <ListingLinkMore
          title={linkTitle}
          href={linkHref}
          linkAlign={linkAlign}
          className="my-4"
          linkmoreIdLighthouse={linkmore_id_lighthouse}
        />
      </Container>
    </div>
  );
};

BandiInEvidenceTemplate.propTypes = {
  items: PropTypes.arrayOf(PropTypes.any).isRequired,
  linkTitle: PropTypes.any,
  linkHref: PropTypes.any,
  isEditMode: PropTypes.bool,
  title: PropTypes.string,
};

export default BandiInEvidenceTemplate;