import React, { Fragment } from 'react';
import { NavLink, Redirect } from 'react-router-dom';

import Sidebar from './sidebar';
import { EditIcon } from './icons';
import CONFIG from './fields-config.json';

const Overview = (props) => {
    var data_layer = 'age'; // always default
    if (props.match && props.match.params && props.match.params.cat) {
        data_layer = props.match.params.cat;
    }

    if (props.mode === 'edit' && !props.user){
        return <Redirect to="/sign-up.html" />
    }

    let title = (props.mode === 'view')? 'View maps' : 'Add or edit data';
    let back = (props.mode === 'edit')? `/view/${data_layer}.html` : undefined;

    return (
        <Sidebar title={title} back={back}>
            {
                CONFIG.map((data_group) => (
                    <OverviewSection {...data_group}
                        data_layer={data_layer} key={data_group.slug} mode={props.mode} />
                ))
            }
        </Sidebar>
    );
}

const OverviewSection = (props) => {
    const match = props.data_layer === props.slug;
    const inactive = props.inactive;

    return (
        <section className={(inactive? 'inactive ': '') + 'data-section legend'}>
            <header className={`section-header ${props.mode} ${props.slug} ${(match? 'active' : '')}`}>
                <NavLink
                    to={`/${props.mode}/${props.slug}.html`}
                    isActive={() => match}
                    title={(inactive)? 'Coming soon… Click the ? for more info.' :
                        (match)? '' : 'Show on map'}>
                    <h3 className="h3">{props.title}</h3>
                </NavLink>
                <nav className="icon-buttons">
                    {
                        props.help?
                            <a className="icon-button help" href={props.help}>
                            Info
                            </a>
                            : null
                    }
                    {
                        props.mode === 'view'?
                            <NavLink className="icon-button edit" title="Edit data"
                                to={`/edit/${props.slug}.html`}>
                            Edit
                                <EditIcon />
                            </NavLink>
                            : null
                    }
                </nav>
            </header>
            {
                (match && props.intro)?
                    (
                        <Fragment>
                            <p className="data-intro">{props.intro}</p>
                            <ul>
                                {
                                    props.fields.map((field) => {
                                        return (<li key={field.slug}>{field.title}</li>)
                                    })
                                }
                            </ul>
                        </Fragment>
                    )
                    : null
            }
        </section>
    )
};

export default Overview;