import React from 'react';
import { connect } from 'react-redux';
import Link from 'app/components/elements/Link';
import * as globalActions from 'app/redux/GlobalReducer';
import links from 'app/utils/Links';
import tt from 'counterpart';

/** @deprecated */
class CardView extends React.Component {
    static propTypes = {
        // HTML properties
        formId: React.PropTypes.string,
        canEdit: React.PropTypes.bool,

        // redux or html
        metaLinkData: React.PropTypes.object,

        // redux
        clearMetaElement: React.PropTypes.func,
    };
    static defaultProps = {
        canEdit: false,
    };
    constructor() {
        super();
        this.onCloseImage = e => {
            e.preventDefault();
            const { formId, clearMetaElement } = this.props;
            clearMetaElement(formId, 'image');
        };
        this.onCloseDescription = e => {
            e.preventDefault();
            const { formId, clearMetaElement } = this.props;
            clearMetaElement(formId, 'description');
        };
    }
    render() {
        const { metaLinkData, canEdit } = this.props;
        if (!metaLinkData) return <span />;
        const { link, image, description, alt } = metaLinkData;
        // http://postimg.org/image/kbefrpbe9/
        if (!image && !description) return <span />;
        // youTubeImages have their own preview
        const youTubeImage = links.youTube.test(link);
        return (
            <span className="Card">
                {image &&
                    !youTubeImage && (
                        <div>
                            {canEdit && (
                                <div>
                                    (<a onClick={this.onCloseImage}>
                                        {tt('g.remove')}
                                    </a>)<br />
                                </div>
                            )}
                            <Link href={link}>
                                <img src={image} alt={alt} />
                            </Link>
                        </div>
                    )}
                {description && (
                    <div>
                        {canEdit && (
                            <span>
                                (<a onClick={this.onCloseDescription}>
                                    {tt('g.remove')}
                                </a>)
                            </span>
                        )}
                        <Link href={link}>
                            <blockquote>{description}</blockquote>
                        </Link>
                    </div>
                )}
            </span>
        );
    }
}
export default connect(
    (state, ownProps) => {
        // const {text} = ownProps
        const formId = ownProps.formId;
        const metaLinkData = state.global.getIn(['metaLinkData', formId]);
        return { metaLinkData, ...ownProps };
    },
    dispatch => ({
        clearMetaElement: (formId, element) => {
            dispatch(globalActions.clearMetaElement({ formId, element }));
        },
    })
)(CardView);
