import { Dispatch, SetStateAction } from 'react';
import { IConfiguration } from '../../Interfaces/IConfiguration';
import { ContainerModel } from '../../Interfaces/IContainerModel';
import { fetchConfiguration } from '../API/api';
import { IEditorState } from '../../Interfaces/IEditorState';
import { LoadState } from './Load';

export function NewEditor(
  setEditorState: Dispatch<SetStateAction<IEditorState>>,
  setLoaded: Dispatch<SetStateAction<boolean>>
): void {
  // Fetch the configuration from the API
  fetchConfiguration()
    .then((configuration: IConfiguration) => {
      // Set the main container from the given properties of the API
      const MainContainer = new ContainerModel(
        null,
        {
          id: 'main',
          parentId: 'null',
          x: 0,
          y: 0,
          width: configuration.MainContainer.Width,
          height: configuration.MainContainer.Height,
          isRigidBody: false,
          isAnchor: false,
          fillOpacity: 0,
          stroke: 'black'
        }
      );

      // Save the configuration and the new MainContainer
      // and default the selected container to it
      const editorState: IEditorState = {
        configuration,
        history:
          [
            {
              LastAction: '',
              MainContainer,
              SelectedContainer: MainContainer,
              SelectedContainerId: MainContainer.properties.id,
              TypeCounters: {}
            }
          ],
        historyCurrentStep: 0
      };
      setEditorState(editorState);
      setLoaded(true);
    }, (error) => {
      // TODO: Implement an alert component
      console.warn('[NewEditor] Could not fetch resource from API. Using default.', error);
      setLoaded(true);
    });
}

export function LoadEditor(
  files: FileList | null,
  setEditorState: Dispatch<SetStateAction<IEditorState>>,
  setLoaded: Dispatch<SetStateAction<boolean>>
): void {
  if (files === null) {
    return;
  }
  const file = files[0];
  const reader = new FileReader();
  reader.addEventListener('load', () => {
    const result = reader.result as string;
    const editorState: IEditorState = JSON.parse(result);

    LoadState(editorState, setEditorState, setLoaded);
  });
  reader.readAsText(file);
}