import {
  $desktopMode,
  $maxNumberActiveStreams,
  $numberActiveLines,
  $selectedLineId,
} from '../../controller/recoil';
import Channels, { DEFAULT_APP_PRESET, Dimensions } from '../../electron/constants';
import { useEffect, useState } from 'react';
import { useRecoilState, useRecoilValue } from 'recoil';

import FullMottoLogo from '../../../../components/logo/fullMotto';
import { LineDataProvider } from '../../controller/lineDataProvider';
import { LogoType } from '@nirvana/components/logo/full';
import NirvanaHeader from '../../components/header/index';
import NirvanaTerminal from '../terminal';

export default function NirvanaRouter() {
  const [selectedLineId, setSelectedLineId] = useRecoilState($selectedLineId);
  const [desktopMode, setDesktopMode] = useRecoilState($desktopMode);
  const numberOfOverlayColumns = useRecoilValue($numberActiveLines);
  const numberOfOverlayRows = useRecoilValue($maxNumberActiveStreams);

  // handle all window resizing logic
  useEffect(() => {
    // add dimensions if it's not overlay only mode
    let finalDimensions: Dimensions = { height: 0, width: 0 };
    let finalPosition: 'center' | 'topRight';

    const setAlwaysOnTop = desktopMode === 'overlayOnly';

    // go hunting for which dimensions to have
    if (desktopMode === 'terminal' || desktopMode == 'flowState') {
      finalDimensions = DEFAULT_APP_PRESET;
    }

    if (desktopMode === 'overlayOnly') {
      finalDimensions = {
        height: 68 + numberOfOverlayRows * 200,
        width: 360 + 360 * numberOfOverlayColumns,
      };
    }

    console.log(
      'setting new dimensions',
      desktopMode,
      numberOfOverlayColumns,
      numberOfOverlayRows,
      finalDimensions,
      setAlwaysOnTop,
    );

    // send the final dimensions to main process
    window.electronAPI.window.resizeWindow({
      setAlwaysOnTop,
      dimensions: {
        height: finalDimensions.height,
        width: finalDimensions.width,
      },
      setPosition: finalPosition,
      addDimensions: false,
    });
  }, [desktopMode, numberOfOverlayColumns, numberOfOverlayRows]);

  // on window blur, put app in overlay only mode
  // get rid of selected line from terminal if we had any...

  useEffect(() => {
    window.electronAPI.on(Channels.ON_WINDOW_BLUR, () => {
      console.log(
        'window blurring now, should be always on top and then ill tell main process to change dimensions',
      );
      // TODO: testing mode... uncomment both instructions below
      // setDesktopMode("overlayOnly");

      // todo: make sure that if I am toggle broadcasted into a line, then don't deselect selected line
      // the overlay should be showing selected line if I am broadcasting toggled into it as well as of course all other toggle tuned ones
      // setSelectedLineId(null);
    });
  }, [setDesktopMode, setSelectedLineId]);

  return (
    <div className="flex flex-col flex-1">
      <NirvanaHeader onHeaderFocus={() => setDesktopMode('terminal')} />

      {desktopMode === 'flowState' && <FlowState />}

      {/* remount nirvana terminal */}
      {(desktopMode === 'terminal' || desktopMode === 'overlayOnly') && (
        <LineDataProvider>
          <NirvanaTerminal overlayOnly={desktopMode === 'overlayOnly'} />
        </LineDataProvider>
      )}
    </div>
  );
}

type Quote = {
  content: string;
  author: string;
  length: number;
  dateAdded: Date;
  _id: string;
  tags: string[];
};
function FlowState() {
  const [quote, setQuote] = useState<Quote>(null);

  useEffect(() => {
    fetch('https://api.quotable.io/random')
      .then((res) => res.json())
      .then((data: Quote) => {
        console.warn(data);

        setQuote(data);
      })
      .catch((error) => {
        // do nothing, don't bother user, just don't show the quote
        console.warn(error);
      });
  }, []);

  return (
    <div className="flex flex-col flex-1 justify-center items-center relative">
      {/* <img src="https://source.unsplash.com/random/?nature" /> */}
      <FullMottoLogo type={LogoType.small} className={'absolute bottom-2 mx-auto'} />

      {quote && (
        <span className="flex flex-col justify-center items-center max-w-screen-sm">
          <span className="text-xl text-gray-800 font-semibold text-center">"{quote.content}"</span>
          <span className="tex-md italic text-gray-400">{quote.author}</span>
        </span>
      )}
    </div>
  );
}