import React from 'react';
import PropTypes from 'prop-types';
import { createNamespace } from '../../tools/namingTools';
import { i18nPropTypes } from '../../constants/prop-types/application/resources/i18n';
import './styles/ResourceCard.scss';
import { PDF_MIME_TYPE } from '../../constants/mimeTypes';
import { PDF_FILE_EXTENSION } from '../../constants/fileExtensions';
import { i18nMock } from '../../../mocks/application/resources/i18n';

const n = createNamespace('resourceCard');

const isPDFResource = resourceType => (
    resourceType === 'PDF_UPLOAD' || resourceType === 'PDF_LINK'
);

const ResourceCard = ({ link, cardTitle, info, resourceType, sizeClass, hidePDFThumbnail, i18n }) => (
    <article {...n('container').props}>
        {(!hidePDFThumbnail || !isPDFResource(resourceType)) && (
            <iframe
                {...n('iframe', sizeClass).withTestId().props}
                title={`${cardTitle}: ${link}`}
                scrolling="no"
                src={`${link}#view=FitH`}
                aria-hidden="true"
                allowFullScreen={resourceType === 'VIDEO'}
            />
        )}
        <h3 {...n('header').withTestId().withE2EId().props}>
            {cardTitle}
        </h3>
        <div {...n('textSection', sizeClass).withTestId().withE2EId().props}>
            {info}
        </div>
        {isPDFResource(resourceType) && (
            <div {...n('pdf').withTestId().props}>
                <a
                    {...n('linkGroup').withTestId().props}
                    href={link}
                    rel="noopener noreferrer"
                    aria-label={`${i18n.Download}: ${cardTitle}`}
                    download
                    type={PDF_MIME_TYPE}
                >
                    <span {...n('icon').withTestId().props} aria-hidden="true">
                        <abbr title={i18n.fileFormat[PDF_FILE_EXTENSION.toLowerCase()].fullName}>
                            {i18n.fileFormat[PDF_FILE_EXTENSION.toLowerCase()].label.toUpperCase()}
                        </abbr>
                    </span>
                    <span {...n('linkText').withTestId().props}>
                        {`${i18n.Download} `}
                        <abbr title={i18n.fileFormat[PDF_FILE_EXTENSION.toLowerCase()].fullName}>
                            {i18n.fileFormat[PDF_FILE_EXTENSION.toLowerCase()].label.toUpperCase()}
                        </abbr>
                    </span>
                </a>
            </div>
        )}
    </article>
);

ResourceCard.propTypes = {
    link: PropTypes.string,
    cardTitle: PropTypes.string,
    info: PropTypes.string,
    width: PropTypes.string,
    height: PropTypes.string,
    resourceType: PropTypes.string,
    sizeClass: PropTypes.string,
    hidePDFThumbnail: PropTypes.bool,
    i18n: PropTypes.shape(i18nPropTypes)
};

ResourceCard.defaultProps = {
    link: '#',
    info: 'Info',
    cardTitle: 'Title',
    width: '412px',
    height: '232px',
    resourceType: 'VIDEO',
    sizeClass: 'size-3',
    hidePDFThumbnail: false,
    i18n: PropTypes.shape({
        Download: 'Download',
        fileFormat: i18nMock
    })
};

export default ResourceCard;
