/* eslint-disable */
import { useEffect, useState, useCallback } from 'react';
import { Notifications } from 'components';
import { AppContainer, DebugButtons, Button } from './styles';
import { theme } from 'static/theme';
import { ENVIRONMENTS } from 'constants';
import { updateViewport, scene, updateLighting, updateMaterial } from 'package/helpers';
import Canvas from 'package/Canvas';
import _ from 'lodash';
import { DragDropInstructions } from './DragDropInstructions';

const materialMode = false;
const previewMode = false;
const demoScene = false;

const App = () => {
  const [ notifications, setNotifications ] = useState([]);
  const [ serializedData, setSerializedData ] = useState({});
  const [ selectedTheme, setSelectedTheme ] = useState('dark');
  const [ exportModel, setExportModel ] = useState(false);
  const [ previewImage ] = useState(null);
  const [ billboardImages ] = useState([]);
  const clearNotifications = () => setNotifications([]);
  const addNotification = useCallback((arr, clearExisting) => {
    let newNotifications = [ ...notifications ];

    if (clearExisting) newNotifications = [];

    arr.forEach(notif => {
      const { config, message } = notif;
      const newNotification = { ...config, message };
      newNotifications = [ ...newNotifications, newNotification ];
    });

    setNotifications(newNotifications);
  }, [ notifications, setNotifications ]);

  const removeNotification = index => {
    const updatedArray = notifications.filter((item, i) => index !== i);
    setNotifications(updatedArray);
  };

  const modelLoaded = serializedData?.metadata?.globalTransforms !== undefined;

  useEffect(() => {
    if (!_.isEmpty(billboardImages) && previewImage) {
      console.log({ billboardImages, previewImage });
    }
  }, [ billboardImages, previewImage ]);

  return (
    <AppContainer theme={theme} $selectedTheme={selectedTheme}>
      <Canvas
        theme={theme}
        $selectedTheme={selectedTheme}
        notifications={notifications}
        addNotification={addNotification}
        clearNotifications={clearNotifications}
        materialMode={materialMode}
        previewMode={previewMode}
        demoScene={demoScene}
        integration={{ shadows: true }}
        file={null}
        guidURL={null}
        updateData={null}
        reinitialize={null}
        defaultEnvironments={ENVIRONMENTS.defaultEnvironments}
        setSerializedData={payload => {
          console.log(payload);
          setSerializedData(payload);
        }}
        clearUpdateData={_.noop}
        toDownload={false}
        exportModel={exportModel}
        exportType='glb'
        setDownloadedModel={null}
        setBillboardImages={null}
      />

      <DragDropInstructions
        theme={theme}
        selectedTheme={selectedTheme}
        modelLoaded={modelLoaded}
      />

      <Notifications
        noTime={true}
        notifications={notifications}
        removeNotification={removeNotification}
      />

      <DebugButtons>
        <Button
          theme={theme}
          $selectedTheme={selectedTheme}
          onClick={() => {
            setExportModel(true);
          }}
        >
          Take screenshot
        </Button>

        <Button
          theme={theme}
          $selectedTheme={selectedTheme}
          onClick={() => {
            const inboundData = {
              payload: {
                iblPipeline: !scene.metadata.iblShadowPipelineEnabled,
              }
            };

            updateViewport(inboundData);
            //console.log({ metadata: scene.metadata });
          }}
        >
          Toggle IBL
        </Button>

        <Button
          theme={theme}
          $selectedTheme={selectedTheme}
          onClick={() => setSelectedTheme(selectedTheme === 'light' ? 'dark' : 'light')}
        >
          Change theme
        </Button>

        <Button
          theme={theme}
          $selectedTheme={selectedTheme}
          onClick={() => {
            const inboundData = {
              payload: {
                id: 'Body',
                newId: 'test',
              },
            };
            updateMaterial(inboundData);
            console.log({ metadata: scene.metadata });
          }}
        >
          Update Body Material
        </Button>
      </DebugButtons>
    </AppContainer>
  );
};

export default App;
