import React from "react"

function AgreementDetails({ agreement, formatter }) {
  return (
    <duet-table variation="plain" className="hidden">
      <table>
        <thead>
        <tr>
          <th>Sijoituskohde</th>
          <th className="duet-text-right">Osuus</th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <td>
            <duet-button
              variation="plain"
              margin="none"
              padding="none"
              url="https://www.duetds.com/assets/downloads/localtapiola-brand-guidelines.pdf"
              external
            >
              Kohde 1<duet-spacer size="xx-small" direction="horizontal"></duet-spacer>
              <duet-icon name="action-new-window-small" margin="none" size="xx-small"></duet-icon>
              <duet-visually-hidden>, avautuu uuteen ikkunaan</duet-visually-hidden>
            </duet-button>
          </td>
          <td className="duet-text-right">25%</td>
        </tr>
        <tr>
          <td>
            <duet-button
              variation="plain"
              margin="none"
              padding="none"
              url="https://www.duetds.com/assets/downloads/localtapiola-brand-guidelines.pdf"
              external
            >
              Kohde 2<duet-spacer size="xx-small" direction="horizontal"></duet-spacer>
              <duet-icon name="action-new-window-small" margin="none" size="xx-small"></duet-icon>
              <duet-visually-hidden>, avautuu uuteen ikkunaan</duet-visually-hidden>
            </duet-button>
          </td>
          <td className="duet-text-right">25%</td>
        </tr>
        <tr>
          <td>
            <duet-button
              variation="plain"
              margin="none"
              padding="none"
              url="https://www.duetds.com/assets/downloads/localtapiola-brand-guidelines.pdf"
              external
            >
              Kohde 3<duet-spacer size="xx-small" direction="horizontal"></duet-spacer>
              <duet-icon name="action-new-window-small" margin="none" size="xx-small"></duet-icon>
              <duet-visually-hidden>, avautuu uuteen ikkunaan</duet-visually-hidden>
            </duet-button>
          </td>
          <td className="duet-text-right">50%</td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
          <td className="duet-font-weight-semi-bold">Yhteisarvo</td>
          <td className="duet-text-right duet-font-weight-semi-bold duet-font-size-large">
            {formatter.format(agreement.price)}
          </td>
        </tr>
        </tfoot>
      </table>
    </duet-table>
  )
}

export default function InvestmentAmount({ value, onChange, agreementOptions, formatter }) {
  function handleAdditionalInvestmentChange(e) {
    const additionalInvestment = e.target.value === "" ? 0 : parseInt(e.target.value)
    e.target.value = additionalInvestment

    onChange({
      ...value,
      additionalInvestment
    })
  }

  function handleAgreementChange(e) {
    onChange({
      ...value,
      agreement: e.detail.value
    })
  }

  const items = Object.entries(agreementOptions).map(([value, { label, price }]) => {
    return {
      value,
      label: `${label} - ${formatter.format(price)}`
    }
  })

  return (
    <div>
      <duet-select
        value={value.agreement}
        items={items}
        onduetChange={handleAgreementChange}
        expand
        label="Valitse sopimus"
        placeholder="Valitse…"
      ></duet-select>

      {value.agreement && <AgreementDetails agreement={agreementOptions[value.agreement]} formatter={formatter} />}
      <duet-spacer></duet-spacer>

      <duet-card variation="plain" background="gray-lighter">
        <duet-input
          value={value.additionalInvestment}
          onduetChange={handleAdditionalInvestmentChange}
          numericKeyboard
          expand
          label="Syötä summa"
          placeholder="50"
          icon="form-money"
          type="number"
        ></duet-input>
      </duet-card>
    </div>
  )
}
