import { useMemo, useReducer } from 'preact/hooks';
import { ExportComponent } from './export';
import { MapComponent } from './map';
import { MarkersComponent } from './markers';
import { createChangeStateMethods, markersReducer } from './reducer';

import './style.css';

export const RoutePlanner = () => {
    const [markers, dispatchMarkers] = useReducer(markersReducer, []);
    const { reorderMarkers, addMarker } = useMemo(
        () => createChangeStateMethods(dispatchMarkers),
        [],
    );

    return (
        <section class="route-planner">
            <section class="header">
                <h2>Route builder</h2>
            </section>
            <section class="markers">
                <MarkersComponent
                    onMarkersReorder={reorderMarkers}
                    markers={markers}
                />
            </section>
            <section class="export">
                <ExportComponent markers={markers} />
            </section>
            <section class="map">
                <MapComponent onMapClick={addMarker} markers={markers} />
            </section>
        </section>
    );
};
