import React from "react";
import { applyPolyfills, defineCustomElements } from '@duetds/components/lib/loader';
import Header from "./components/Header";
import InvestmentAmount from "./components/InvestmentAmount";
import InvestmentOrigin from "./components/InvestmentOrigin";
import Summary from "./components/Summary";
import Footer from "./components/Footer";

applyPolyfills().then(() => {
  defineCustomElements();
});

const agreementOptions = {
  1: { label: "Vakuutus 1", price: 2500 },
  2: { label: "Vakuutus 2", price: 1000 }
}

const formatter = new Intl.NumberFormat("fi-FI", { style: "currency", currency: "EUR" })

function App() {
  const [currentStep, setCurrentStep] = React.useState(0)
  const [formData, setFormData] = React.useState({
    investmentAmount: {
      agreement: "",
      additionalInvestment: 50
    },
    investmentOrigin: {
      salary: false,
      gift: false,
      heritage: false,
      entrepreneurialIncome: false,
      assets: false,
      otherIncome: false,
      investment: false,
      extras: ""
    }
  })
  const [complete, setComplete] = React.useState(false)

  function handleInvestmentAmountChange(investmentAmount) {
    setFormData(data => ({
      ...data,
      investmentAmount
    }))
  }

  function handleInvestmentOriginChange(investmentOrigin) {
    setFormData(data => ({
      ...data,
      investmentOrigin
    }))
  }

  function handleNextClick() {
    setCurrentStep(step => step + 1)
  }

  React.useEffect(() => {
    if (window.innerWidth > 992) {
      window.scrollTo(0, 160)
    } else {
      window.scrollTo(0, 110)
    }
  }, [currentStep])

  return (
    <>
      <Header />
      <duet-layout center>
        <div slot="top" role="region">
          <duet-spacer breakpoint="large" size="x-large"/>
          <duet-heading level="h1" visual-level="h2">
            Pääotsikko
          </duet-heading>
          <duet-spacer/>
        </div>
        <div slot="main">
          <duet-stepper selected={currentStep} onduetStepChange={e => setCurrentStep(e.detail.toStep)}>
            <duet-step heading="Perustiedot">
              <duet-paragraph>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                incididunt ut labore
                etdolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                laboris nisi ut
                aliquip.
              </duet-paragraph>
              <InvestmentAmount
                value={formData.investmentAmount}
                onChange={handleInvestmentAmountChange}
                agreementOptions={agreementOptions}
                formatter={formatter}
              />
              <duet-spacer></duet-spacer>
              <duet-button
                id="step1"
                disabled={!formData.investmentAmount.agreement}
                margin="none"
                variation="primary"
                onClick={handleNextClick}
              >
                Seuraava
              </duet-button>
            </duet-step>
            <duet-step heading="Tarkemmat tiedot">
              <duet-paragraph>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                incididunt ut labore
                etdolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                laboris nisi ut
                aliquip.
              </duet-paragraph>
              <InvestmentOrigin value={formData.investmentOrigin}
                                onChange={handleInvestmentOriginChange}/>
              <duet-spacer></duet-spacer>
              <duet-button id="step2" margin="none" variation="primary" onClick={handleNextClick}>
                Seuraava
              </duet-button>
            </duet-step>
            <duet-step heading="Yhteenveto">
              <duet-spacer></duet-spacer>
              <Summary agreement={agreementOptions[formData.investmentAmount.agreement]}
                       formatter={formatter}/>
              <duet-spacer></duet-spacer>
              <duet-button id="step3" margin="none" variation="primary" expand
                           onClick={() => setComplete(true)}>
                Lähetä
              </duet-button>
            </duet-step>
          </duet-stepper>
        </div>
      </duet-layout>
      <Footer/>
      <duet-modal heading="You entered the following data:" active={complete}>
        <pre>{JSON.stringify(formData, null, "  ")}</pre>
      </duet-modal>
    </>
  )
}

export default App;
