import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from './assets/vite.svg'
import heroImg from './assets/hero.png'
import './App.css'
import * as ElixForms from './components/ElixFormsComponent';

function App() {
  const [count, setCount] = useState(0)

  /** @type {import('./components/ElixFormsComponent').ElixFormsComponent} */
  var myElixFormsReact = new ElixForms.ElixFormsReact();

  myElixFormsReact.props = {
    description: "This is a custom form created with ElixFormsReact component.",
    isDarkTheme: false,
    environmentMessage: "TESTING!",
    /*
    additionalFieldsJson: JSON.stringify([
      {
        "key": "COL0002",
        "type": "text",
        "label": "Campo STRING",
        "required": false
      },
      {
        "key": "COL0003",
        "type": "textarea",
        "label": "Campo TEXTAREA",
        "required": false
      },
      {
        "key": "COL0004",
        "type": "boolean",
        "label": "Campo Boolean",
        "required": false
      },
      {
        "key": "COL0005",
        "type": "radio",
        "label": "Campo _RADIO_",
        "required": false,
        "options": [
          { "value": 1, "label": "Opzione 1" },
          { "value": 2, "label": "Opzione 2" },
          { "value": 3, "label": "Altra opzione" }
        ]
      },
      {
        "key": "COL0006",
        "type": "checkbox",
        "label": "Campo CHECKBOX",
        "options": [
          { "value": 4, "label": "Check 1" },
          { "value": 5, "label": "Check due" },
          { "value": 6, "label": "Altro check" }
        ]
      },
      {
        "key": "COL0015",
        "type": "dropdown",
        "label": "Validazione lista",
        "required": true,
        "options": [
          { "value": 0, "label": "Not applicable" },
          { "value": 1, "label": "Goal 1: No poverty" },
          { "value": 2, "label": "Goal 2: Zero hunger" },
          { "value": 3, "label": "Goal 3: Good health and well-being" },
          { "value": 4, "label": "Goal 4: Quality education" },
          { "value": 5, "label": "Goal 5: Gender equality" },
          { "value": 6, "label": "Goal 6: Clean water and sanitation" },
          { "value": 7, "label": "Goal 7: Affordable and clean energy" },
          { "value": 8, "label": "Goal 8: Decent work and economic growth" },
          { "value": 9, "label": "Goal 9: Industry, Innovation, and Infrastructure" },
          { "value": 10, "label": "Goal 10: Reduced inequalities" },
          { "value": 11, "label": "Goal 11: Sustainable cities and communities" },
          { "value": 12, "label": "Goal 12: Responsible consumption and production" },
          { "value": 13, "label": "Goal 13: Climate action" },
          { "value": 14, "label": "Goal 14: Life below water" },
          { "value": 15, "label": "Goal 15: Life on land" },
          { "value": 16, "label": "Goal 16: Peace, justice and strong institutions" },
          { "value": 17, "label": "Goal 17: Partnerships for the goals" }
        ]
      }
    ]),
    */
    customFormFieldsConfiguration: (
      /** @type {import('./components/IElixFormsComponentCustomFormFieldFactory').IElixFormsComponentCustomFormFieldFactory} */
      formFieldFactory
    ) => (
      <>
        {formFieldFactory.createTextInput("name", "Name", true)}
        {formFieldFactory.createTextAreaInput("description", "Description")}
        {formFieldFactory.createNumberInput("number", "Number")}
        {formFieldFactory.createBooleanInput("boolean", "Boolean")}
        {formFieldFactory.createRadioInput("radio", "Radio", [{ "value": 1, "label": "Opzione 1" }, { "value": 2, "label": "Opzione 2" }, { "value": 3, "label": "Altra opzione" }])}
        {formFieldFactory.createDropdownInput("dropdown", "Dropdown", [{ "value": 0, "label": "Not applicable" }, { "value": 1, "label": "Goal 1: No poverty" }, { "value": 2, "label": "Goal 2: Zero hunger" }, { "value": 3, "label": "Goal 3: Good health and well-being" }])}
        {formFieldFactory.createCheckboxInput("checkbox", "Checkbox", [{ "value": 0, "label": "Check 1" }, { "value": 1, "label": "Check 2" }, { "value": 2, "label": "Check 3" }])}
      </>
    )
  };

  var elixFormsReactRender = myElixFormsReact.render();

  return <>
      <div className="container_12" id="pageBody">
        <div className="grid_12">
          <div id="userConsole" className="fe-behaviour">
            <header>
              <div className="neutral">
                <div className="grid_12">
                  <div className="console_header">
                    <div className="leftDiv">
                      <h1>elixForms</h1>
                      <div className="logo"><a href="https://www.unipr.it/" title="Torna alla homepage dell'Università: di Parma"><img src="https://console-unipr.elixforms.it/elixFormsCustom/images/logo.png" alt="Logo Università: di Parma" /></a>
                      </div>
                    </div>
                    <div className="rightDiv">
                      <div className="rightDivInside info padding_r">
                        <div className="clear"></div>
                      </div>
                    </div>
                    <div className="clear"></div>
                  </div>
                </div>
                <div className="clear"></div>
              </div>
            </header>

            <div className="grid_12 console_main">
              <div className="inside">
                <div>
                  <div className="fe-module-header-container">
                    <h2>Modulo A/13 - Richiesta di Certificato</h2>
                  </div>
                </div>
                <div className="receipt">
                  <div className="container">
                    <h1>Scelta Carriera</h1>
                    <img src={heroImg} alt="Hero Image" className="hero-image" />
                    <p>Benvenuto nella piattaforma di scelta carriera! Esplora le tue opzioni e trova la strada giusta per te.</p>
                    {elixFormsReactRender}
                    <p>Altre cose</p>
                  </div>
                </div>
              </div>
            </div>

            <div className="clear"></div>

            <footer className="it-footer">
              <div className="it-footer-main">
                <div className="container">
                  <div className="row clearfix">
                    <div className="col-sm-12">
                      <div className="footer-content">
                        <div className="subfooter-top">powered by <span className="highlight">elixForms</span></div>
                        <div className="subfooter-bottom"><div>versione 1.24.0</div></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </footer>
          </div>
          <div className="clear"></div>
        </div>
      </div>
  </>;

}

export default App