import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Loader, Message, Tab, Label, Menu } from 'semantic-ui-react';

class UploadResults extends Component {
    render(){
        const {pending, result, error} = this.props;

        const parsedEntries = result && result.parsedData ? result.parsedData : [];
        const errorEntries = result && result.parserErrors ? result.parserErrors : [];
        const unknownMembers = result && result.unknownMembers ? result.unknownMembers : [];

        const renderParsedEntriesTab = () => {
            return (
                <div>
                    <br/>
                    <Message positive>
                        <p>{parsedEntries.length} entries successfully parsed</p>
                    </Message>
                </div>
            );
        };

        const renderErrorTabResults = (results) => {
            return (
                <div>
                    <br/>
                    {
                        results.map((entry, index) => {
                            return (
                                <div key={`error-${entry.error}-${index}`}>
                                    <br/>
                                    <Message negative>
                                        <Message.Header>{entry.error}</Message.Header>
                                        <p>{JSON.stringify(entry.details)}</p>
                                        <p>File : {entry.file}</p>
                                    </Message>
                                </div>
                            );
                        })
                    }
                </div>
            );
        };

        const parsedEntriesTabTitle = (<Menu.Item key="parsed-entries">Parsed Entries<Label>{parsedEntries.length}</Label></Menu.Item>);
        const errorEntriesTabTitle = (<Menu.Item key="error-entries">Error Entries<Label>{errorEntries.length}</Label></Menu.Item>);
        const unknownMembersTabTitle = (<Menu.Item key="unknown-members">Unknown Members<Label>{unknownMembers.length}</Label></Menu.Item>);

        const panes = [
            {menuItem: parsedEntriesTabTitle, render: renderParsedEntriesTab},
            {menuItem: errorEntriesTabTitle, render: () => renderErrorTabResults(errorEntries)},
            {menuItem: unknownMembersTabTitle, render: () => renderErrorTabResults(unknownMembers)}
        ];


        return (
            <div>
            {
                pending && <Loader active />
            }
            <br/>
            {
                !pending && !error && result &&
                <Tab panes={panes}/>
            }
            {
                !pending && error &&
                <Message>
                    <Message.Header>Upload Failed</Message.Header>
                    <p>{error.data}</p>
                </Message>
            }
            </div>
        )
    }
}

const mapStateToProps = (state) => ({
    pending: state.doorLockData.pending,
    result: state.doorLockData.result,
    error: state.doorLockData.error,

});

export default connect(mapStateToProps)(UploadResults);