import { parse } from 'query-string';
import React from 'react';
import { Link, Redirect, RouteComponentProps } from 'react-router-dom';

import { parseJsonOrDefault } from '../../helpers';
import ErrorBox from '../components/error-box';
import { BackIcon } from '../components/icons';
import InfoBox from '../components/info-box';
import { dataFields } from '../data_fields';
import { User } from '../models/user';

import DataEntry from './data-components/data-entry';
import Sidebar from './sidebar';

interface MultiEditProps {
    user?: User;
    category: string;
    dataString: string;
}

const MultiEdit: React.FC<MultiEditProps> = (props) => {
    if (!props.user){
        return <Redirect to="/sign-up.html" />;
    }
    if (props.category === 'like') {
        // special case for likes
        return (
            <Sidebar>
                <section className='data-section'>
                    <header className={`section-header view ${props.category} background-${props.category}`}>
                        <h2 className="h2">Like me!</h2>
                    </header>
                    <form className='buttons-container'>
                        <InfoBox msg='Click all the buildings that you like and think contribute to the city!' />

                        <Link to='/view/like' className='btn btn-secondary'>Back to view</Link>
                        <Link to='/edit/like' className='btn btn-secondary'>Back to edit</Link>
                    </form>
                </section>
            </Sidebar>
        );
    }

    let data = parseJsonOrDefault(props.dataString);

    let error: string;
    if(data == null) {
        error = 'Invalid parameters supplied';
        data = {};
    } else if(Object.values(data).some(x => x == undefined)) {
        error = 'Cannot copy empty values';
        data = {};
    }

    return (
        <Sidebar>
            <section className='data-section'>
                <header className={`section-header view ${props.category} background-${props.category}`}>
                    <Link
                        className="icon-button back"
                        to={`/edit/${props.category}`}>
                        <BackIcon />
                    </Link>
                    <h2 className="h2">Copy {props.category} data</h2>
                </header>
                <form>
                    {
                        error ?
                            <ErrorBox msg={error} /> :
                            <InfoBox msg='Click buildings one at a time to colour using the data below' />
                    }
                {
                    Object.keys(data).map((key => {
                        const info = dataFields[key] || {};
                        return (
                        <DataEntry
                            title={info.title || `Unknown field (${key})`}
                            slug={key}
                            disabled={true}
                            value={data[key]}
                            />
                        );
                    }))
                }
                </form>
                <form className='buttons-container'>
                    <Link to={`/view/${props.category}`} className='btn btn-secondary'>Back to view</Link>
                    <Link to={`/edit/${props.category}`} className='btn btn-secondary'>Back to edit</Link>
                </form>
            </section>
        </Sidebar>
    );
};

export default MultiEdit;