import moment from "moment";
import { createSignal } from "solid-js";

import { SelectCity } from "../../components/SelectCity";
import { SelectTimeRange } from "../../components/SelectTimeRange";
import { SelectField } from "../../components/SelectField";

import { SelectGranularity } from "./SelectGranularity";
import { SelectKey } from "./SelectKey";
import { QueryView } from "./result/QueryView";

const nowRounded = new Date(new Date().setMinutes(30));
const dayAgo = moment(nowRounded).subtract(1, "days").subtract(30, "minutes").toDate();

export function Cities() {
    const [getCities, setCities] = createSignal<Set<string>>(new Set([]));
    const [getStart, setStart] = createSignal(dayAgo);
    const [getEnd, setEnd] = createSignal(nowRounded);
    const [getField, setField] = createSignal("tempMax");
    const [getKey, setKey] = createSignal("max");
    const [getGranularity, setGranularity] = createSignal("hour");

    return (
        <div class="aggregator pageWorkspace">
            <div class="pageHeading"><div><span class="eyebrow">Historical observations</span><h1>City analysis</h1><p>Choose stations and a calculation, then compare the resulting values.</p></div><div class="selectionCount">{getCities().size} cities selected</div></div>
            <div class="cityWorkspace">
                <aside class="cityPanel workspaceRail">
                    <h2>1. Choose cities</h2>
                    <SelectCity getCities={getCities} setCities={setCities} />
                </aside>
                <section class="analysisMain">
                    <aside class="queryPanel workspaceToolbar">
                        <h2>2. Configure query</h2>
                        <div class="queryTimeRange">
                            <SelectTimeRange
                                getStart={getStart}
                                setStart={setStart}
                                getEnd={getEnd}
                                setEnd={setEnd}
                            />
                        </div>
                        <div class="queryOptions">
                            <div class="queryField">
                                <h4>Select field</h4>
                                <SelectField getField={getField} setField={setField} />
                            </div>
                            <SelectKey getKey={getKey} setKey={setKey} />
                            <SelectGranularity getGranularity={getGranularity} setGranularity={setGranularity} />
                        </div>
                    </aside>
                    <section class="resultsPanel">
                        <QueryView
                            getCities={getCities}
                            getStart={getStart}
                            getEnd={getEnd}
                            getField={getField}
                            getKey={getKey}
                            getGranularity={getGranularity}
                        />
                    </section>
                </section>
            </div>
        </div>
    );
}
