import React from 'react';
import './App.scss';
import Sidebar from './Components/Sidebar/Sidebar';
import { SVGSidebar } from './Components/SVGSidebar/SVGSidebar';
import { AvailableContainer } from './Interfaces/AvailableContainer';
import { Configuration } from './Interfaces/Configuration';
import { SVG } from './SVG/SVG';

interface IAppProps {
}

interface IAppState {
  isSidebarOpen: boolean,
  isSVGSidebarOpen: boolean,
  configuration: Configuration
}

class App extends React.Component<IAppProps> {
  public state: IAppState;

  constructor(props: IAppProps) {
    super(props);
    this.state = {
      isSidebarOpen: true,
      isSVGSidebarOpen: true,
      configuration: {
        AvailableContainers: [],
        AvailableSymbols: [],
        MainContainer: {} as AvailableContainer
      }
    };
  }

  componentDidMount() {
    fetchConfiguration().then((configuration: Configuration) => {
      this.setState(prevState => ({
        ...prevState,
        configuration
      }));
    });
  }

  public ToggleSidebar() {
    this.setState(prevState => ({
      ...prevState,
      isSidebarOpen: !this.state.isSidebarOpen
    } as IAppState));
  }

  public ToggleSVGSidebar() {
    this.setState(prevState => ({
      ...prevState,
      isSVGSidebarOpen: !this.state.isSVGSidebarOpen
    } as IAppState));
  }

  render() {
    return (
      <div className="App font-sans h-full">
        <Sidebar componentOptions={this.state.configuration.AvailableContainers} isOpen={this.state.isSidebarOpen} onClick={() => this.ToggleSidebar()} />
        <button className='fixed z-0 top-4 left-4 text-lg bg-blue-200 hover:bg-blue-300 transition-all drop-shadow-md hover:drop-shadow-lg py-2 px-3 rounded-lg' onClick={() => this.ToggleSidebar()}>&#9776; Menu</button>
        <SVGSidebar isOpen={this.state.isSVGSidebarOpen} onClick={() => this.ToggleSVGSidebar()}/>
        <button className='fixed z-0 top-4 right-4 text-lg bg-slate-200 hover:bg-slate-300 transition-all drop-shadow-md hover:drop-shadow-lg py-2 px-3 rounded-lg' onClick={() => this.ToggleSVGSidebar()}>&#9776; Menu</button>
        <SVG MainContainer={this.state.configuration.MainContainer} />
      </div>
    );
  }
}

async function fetchConfiguration(): Promise<Configuration> {
  const url = `${import.meta.env.VITE_API_URL}`;
  const myHeaders = new Headers({
    'Content-Type': 'application/json'
  });

  const myInit = {
    method: 'POST',
    headers: myHeaders
  };

  return await fetch(url, myInit)
    .then((response) =>
      response.json()
    ) as Configuration;
}

export default App;