/**
 * @license
 *
 * Copyright 2019 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/**
 * @fileoverview Main React component that includes the Blockly component.
 * @author samelh@google.com (Sam El-Husseini)
 */

import React from 'react';
// import './App.css';

// import logo from './logo.svg';

import BlocklyComponent, { Block, Value, Field, Shadow, Category } from './Blockly';

import './blocks/customblocks';
import './generator/generator';


function App(props) {
  return (
    <div className="App">
        <BlocklyComponent 
        
        media={'media/'}
        scrollbars = {true}
        collapse = {true}
        comments = {true}
        disable = {true}
        maxBlocks = {Infinity}
        trashcan = {true}
        horizontalLayout = {false}
        toolboxPosition = {'start'}
        css = {true}
        // media = {'https://Blockly-demo.appspot.com/static/media/'}
        rtl = {false}
        sounds = {true}
        oneBasedIndex = {true}
        zoom = {{
          controls: true
        }}
        grid= {{
          spacing: 25,
          length: 3,
          colour: '#ccc',
          snap: true
        }}
        initialXml={'<xml><Block type="contract" deletable="false" movable="false"></Block></xml>'}
        >

          <Category name="Contracts" colour="#5ba580">
            <Block type="contract_state"/>
            <Block type="contract_state_get"/>
            <Block type="contract_state_set"/>
            <Block type="contract_ctor"/>
            <Block type="contract_method"/>
            <Block type="contract_method_parameter"/>
            <Block type="contract_method_parameter_get"/>
            <Block type="contract_method_call"/>
          </Category>
          <Category name="Logic and Math" colour="#5C81A6">
            <Block type="logic_boolean"/>
            <Block type="logic_compare"/>
            <Block type="logic_operation"/>
            <Block type="controls_ifelse"/>
            <Block type="controls_if"/>
            <Block type="math_number"/>
            <Block type="math_arithmetic"/>
          </Category>
          <Category name="Variables" custom="VARIABLE" colour="#2c3b1b"></Category>
          <Category name="Functions" custom="PROCEDURE" colour="#32a852"></Category>
          <Category name="Error-Handling" colour="#9c7441">
            <Block type="assert" />
            <Block type="require" />
            <Block type="revert" />
          </Category>
          <Category name="Control Statements" colour="#9c415c"></Category>
          <Category name="Operators" colour="#79419c"></Category>
        </BlocklyComponent>
    </div>
  );
}

export default App;