import React from 'react';
import {dateFormatter, checkDeepEquals} from '../../UtilitiesFunctions/objectUtilities';
import Tooltip from '../Tooltip/Tooltip';
import {hostUrls} from '../editAlert/constants';



export default class Attachments extends React.Component{

    constructor(props) {
        super(props);
        this.state = {documentData: props.documentData};
    }

    fileType = (url) => {
        let extension = url.substr(url.length - 3);
        return extension.toLowerCase();
    }

    componentWillReceiveProps(nextProps) {
        if(!checkDeepEquals(this.props, nextProps)){
            this.setState({
                documentData: nextProps.documentData
            });
        }

    }


    render(){
        const props = this.props;
        return (
            <div>
                {
                    this.state.documentData.map((data, i) => {
                        return (
                            <div className="attachment" key = {i}>
                                <a href={data.url} target="_blank">
                                    {
                                        (this.fileType(data.url) !== 'pdf')?
                                            <img src={data.url} className="comment-img"/>
                                            :
                                            <img src={`${hostUrls.CdnUrl}/images/pdf-Icon.png`} className="comment-img"/>
                                    }
                                </a>
                                <p className="attachment-label">
                                    {
                                        (data.documentName && data.documentName.length > 43)?
                                            <Tooltip
                                                hoverElement={data.documentName.substr(0,40)+'...'}
                                                tooltipText={data.documentName}
                                                label={data.documentName.substr(0,40)+'...'}
                                            />
                                            :
                                            data.documentName
                                    }
                                    </p>
                                <div className="attachment-user-detail">
                                    <p className="attachment-name">
                                        {
                                            (data.userDetail)?
                                                (
                                                    (data.userDetail.name >= 15)?
                                                        <Tooltip
                                                            hoverElement={data.userDetail.name.substr(0,12)+'...'}
                                                            tooltipText={data.userDetail.name}
                                                            label={data.userDetail.name.substr(0,12)+'...'}
                                                        />
                                                        :
                                                        data.userDetail.name
                                                )
                                                :
                                                '--'
                                        }
                                    </p>
                                    <p className="attachment-time">{dateFormatter(data.lastUpdatedTimestamp, 'DD-MM-YY HH:mm')}</p>
                                </div>
                            </div>
                        )
                    })
                }
            </div>
        );
    }
}

