import React, { useEffect } from "react";
import { useDispatch } from "react-redux";
import { useRxData } from "rxdb-hooks";

import { APP_SETTINGS } from "./local_storage/schemas";
import { useFetchWorkplaceQuery } from "../apis/backendHttp";
import { setCompact } from "./taskbarSlice";
import "./Taskbar.less";

import TaskbarLayout from "./layout/TaskbarLayout";
import CompactLayout from "./layout/CompactLayout";

const generateRandomDelay = (min, max) => {
  return Math.floor(Math.random() * (max - min)) + min;
};

const FETCH_WORKPLACE_ADD_RANDOM =
  process.env.FETCH_WORKPLACE_ADD_RANDOM_IN_MIN * 60 * 1000 || 0;
const random = generateRandomDelay(0, FETCH_WORKPLACE_ADD_RANDOM);
const FETCH_WORKPLACE_TIMEOUT =
  process.env.FETCH_WORKPLACE_TIMEOUT_IN_MIN * 60 * 1000 + random ||
  10 * 60 * 1000 + random;

export default function Taskbar(props) {
  const { compact } = props;
  const dispatch = useDispatch();

  const { result: settings, isFetching: isFetchingSettings } = useRxData(
    "settings",
    (collection) => collection?.findOne(APP_SETTINGS)
  );
  const { refetch: workplaceRefetch } = useFetchWorkplaceQuery(window.hostname);

  useEffect(() => {
    dispatch(setCompact(compact));
  }, [dispatch, compact]);

  useEffect(() => {
    const updateTimer = setInterval(() => {
      workplaceRefetch();
    }, FETCH_WORKPLACE_TIMEOUT);
    return () => clearInterval(updateTimer);
  }, [workplaceRefetch]);

  return compact ? (
    <CompactLayout
      isFetchingSettings={isFetchingSettings}
      settings={settings}
    />
  ) : (
    <TaskbarLayout
      isFetchingSettings={isFetchingSettings}
      settings={settings}
    />
  );
}