import React from 'react';
import PropTypes from 'prop-types';
import IDUtil from '../../util/IDUtil'; // for generating unique CSS classnames for this component
import MetadataRow from './metadataColumn/MetadataRow';
import { exportDataAsJSON } from '../workspace/helpers/Export';

/*
	This component shows the metadata of the given resource / mediaobject?
*/

export default class MetadataColumn extends React.Component {
    onExport = () => {
        exportDataAsJSON(this.props.resource);
    };

    renderRow = (title, data, description) => {
        if (!data) return null;
        // Process data
        switch (title) {
            case 'externalSourceInfo':
                if (!data.url) {
                    // no link available
                    data = data.message;
                } else {
                    // Use link and message to render link
                    const newData = (
                        <a href={data.url} target="_blank">
                            {data.message || 'External source'}
                        </a>
                    );
                    return (
                        <MetadataRow
                            key={title}
                            title={title}
                            description={description}
                            data={newData}
                        />
                    );
                }
        }

        // Based on data type
        switch (typeof data) {
            case 'string':
                return (
                    <MetadataRow
                        key={title}
                        title={title}
                        description={description}
                        data={<span>{data}</span>}
                    />
                );

            case 'object':
                // check for array
                if (data.length !== undefined) {
                    return this.renderRow(title, data.join(', '));
                }

                return Object.keys(data).map(key =>
                    this.renderRow(key, data[key])
                );

            case 'undefined':
                return null;

            default:
                return <div>Unknown type: {typeof data}</div>;
        }
    };

    render() {
        const resource = this.props.resource;

        // Define which fields should be shown
        // Specify key, and optionally the
        const fields = [
            { key: 'title' },
            {
                key: 'date',
                description:
                    'Date field: ' +
                    (this.props.resource.dateField
                        ? this.props.resource.dateField
                        : 'Unknown')
            },
            { key: 'description' },
            { key: 'docType' },
            { key: 'index' },
            { key: 'resourceId' },
            { key: 'specialProperties' },
            { key: 'externalSourceInfo' }
        ];

        const metadata = fields.map(field =>
            this.renderRow(field.key, resource[field.key], field.description)
        );

        return (
            <div className={IDUtil.cssClassName('metadata-column')}>
                <div className="fields">{metadata}</div>
                <div className="actions">
                    <button className="btn link" onClick={this.onExport}>
                        Full metadata
                    </button>
                </div>
            </div>
        );
    }
}

MetadataColumn.propTypes = {
    resource: PropTypes.object
};
