/*
 * Copyright (C)  2021-2022 Kristóf Marussy <kristof@marussy.com>
 *
 * This file is part of Sophie.
 *
 * Sophie is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as
 * published by the Free Software Foundation, version 3.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */

import { throttle } from 'lodash';
import { observer } from 'mobx-react-lite';
import Box from '@mui/material/Box';
import React, {
  useCallback,
  useEffect,
  useRef,
  useState,
} from 'react';
import type { BrowserViewBounds } from '@sophie/shared';

import { useStore } from './StoreProvider';

export const BrowserViewPlaceholder = observer(function BrowserViewPlaceholder() {
  const {
    shared: {
      browserViewBounds: {
        x: storeX,
        y: storeY,
        width: storeWidth,
        height: storeHeight,
      },
    },
    setBrowserViewBounds,
  } = useStore();

  const [
    {
      x: currentX,
      y: currentY,
      width: currentWidth,
      height: currentHeight,
    },
    setBounds,
  ] = useState<BrowserViewBounds>({
    x: 0,
    y: 0,
    width: 0,
    height: 0,
  });

  useEffect(() => {
    if (storeX !== currentX
        || storeY !== currentY
        || storeWidth !== currentWidth
        || storeHeight !== currentHeight) {
      setBrowserViewBounds({
        x: currentX,
        y: currentY,
        width: currentWidth,
        height: currentHeight,
      });
    }
  }, [
    storeX,
    storeY,
    storeWidth,
    storeHeight,
    setBrowserViewBounds,
    currentX,
    currentY,
    currentWidth,
    currentHeight,
  ]);

  const onResize = useCallback(throttle(([boxEntry]: ResizeObserverEntry[]) => {
    if (boxEntry) {
      const {
        x,
        y,
        width,
        height,
      } = boxEntry.target.getBoundingClientRect();
      setBounds({
        x,
        y,
        width,
        height,
      });
    }
  }, 100), [setBounds]);

  const resizeObserverRef = useRef<ResizeObserver | null>(null);

  const ref = useCallback((box: HTMLElement | null) => {
    if (resizeObserverRef.current !== null) {
      resizeObserverRef.current.disconnect();
    }
    if (box === null) {
      resizeObserverRef.current = null;
      return;
    }
    resizeObserverRef.current = new ResizeObserver(onResize);
    resizeObserverRef.current.observe(box);
  }, [onResize, resizeObserverRef]);

  return (
    <Box
      sx={{
        flex: 1,
        // Workaround: display a plain white background if we fail to set the BrowserView background color.
        // https://github.com/electron/electron/issues/31019
        background: '#fff',
      }}
      ref={ref}
    />
  )
});