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>
                <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>
            </div>
        </div>
    );
}