import { load } from '@loaders.gl/core';
import { CSVLoader } from '@loaders.gl/csv';
import { useQuery } from '@tanstack/react-query';
import { Select, Slider, Space, Spin } from 'antd';
import { scaleLinear } from 'd3-scale';
import { interpolateViridis } from 'd3-scale-chromatic';
import { DeckGL, GridCellLayer, ScatterplotLayer } from 'deck.gl';
import 'maplibre-gl/dist/maplibre-gl.css';
import { useState } from 'react';
import Map from 'react-map-gl/maplibre';

const colorScale = scaleLinear<string, string>().domain([0, 10000]).range([interpolateViridis(0), interpolateViridis(1)]);
const radiusScale = scaleLinear().domain([0, 12000]).range([50, 250]);

function App() {
  const [value, setValue] = useState(0);
  const [attr, setAttr] = useState("00:00:00");
  const [day, setDay] = useState("2023-12-01")

  const { isPending, error, data } = useQuery({
    queryKey: [day],
    queryFn: () => load(`./${day}.csv`, CSVLoader, { csv: {} }),
  })

  if (error) {
    console.log(error)
  }

  const layers = isPending ? [] : [
    new GridCellLayer({
      id: 'deckgl-grid',
      //@ts-ignore
      data: data.data,
      getPosition: d => [d.x, d.y],
      //@ts-ignore
      getFillColor: d => colorScale(d[attr]).slice(4, -1).split(", ").map(Number),
      cellSize: 505,
      extruded: false,
      updateTriggers: {
        getFillColor: [attr],
      }
    }),
    new ScatterplotLayer({
      id: 'deckgl-circle2',
      //@ts-ignore
      // data: isPending ? [] : data.data,
      getPosition: d => [d.x, d.y],
      //@ts-ignore
      getFillColor: d => colorScale(d[attr]).slice(4, -1).split(", ").map(Number),
      getRadius: d => radiusScale(d[attr]),
      updateTriggers: {
        getFillColor: [attr],
        getRadius: [attr]
      }
    }),
  ];

  return (
    <>
      <DeckGL
        initialViewState={{
          longitude: 37.028,
          latitude: 55.778,
          zoom: 7
        }}
        controller
        layers={layers}
      >
        <Map mapStyle="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json" hash={true} />
      </DeckGL>
      <Space style={{ position: "absolute", zIndex: 1, justifyContent: "center", padding: 30 }} direction='vertical'>
        <Spin spinning={isPending} />
        <Select
          onChange={setDay}
          options={[{ value: "2023-12-01" }, { value: "2023-12-02" }]}
          value={day}
        />
        <Slider
          value={value}
          min={0}
          max={47}
          onChange={e => setValue(e)}
          onChangeComplete={hour => {
            const hours = Math.floor(hour / 2).toString().padStart(2, "0");
            const minutes = ((hour % 2) * 30).toString().padStart(2, "0");
            const field = hours + ":" + minutes + ":00";
            setAttr(field);
          }}
        />
        <p id="time">{attr}</p>
        <button onClick={() => {
          setValue((value + 1))
          //@ts-ignore
          const hour = parseInt(value);
          const hours = Math.floor(hour / 2).toString().padStart(2, "0");
          const minutes = ((hour % 2) * 30).toString().padStart(2, "0");
          const field = hours + ":" + minutes + ":00";
          setAttr(field);
        }}>Плюс</button>
      </Space>
    </>

  );
}

export default App