import React from "react"

export default function InvestmentOrigin({ value, onChange }) {
  const [hasExtras, setHasExtras] = React.useState(false)

  function handleAssetOriginChange(e) {
    onChange({
      ...value,
      [e.target.name]: e.detail.checked
    })
  }

  function handleExtraDetailsChange(e) {
    onChange({
      ...value,
      extras: e.detail.value
    })
  }

  function handleExtrasChange(e) {
    setHasExtras(e.target.checked)

    if (!e.target.checked) {
      onChange({
        ...value,
        extras: ""
      })
    }
  }

  return (
    <div>
      <duet-checkbox
        name="salary"
        checked={value.salary}
        onduetChange={handleAssetOriginChange}
        label="Valinta 1"
      ></duet-checkbox>
      <duet-checkbox
        name="gift"
        checked={value.gift}
        onduetChange={handleAssetOriginChange}
        label="Valinta 2"
      ></duet-checkbox>
      <duet-checkbox
        name="heritage"
        checked={value.heritage}
        onduetChange={handleAssetOriginChange}
        label="Valinta 3"
      ></duet-checkbox>
      <duet-checkbox
        name="entrepreneurialIncome"
        checked={value.entrepreneurialIncome}
        onduetChange={handleAssetOriginChange}
        label="Valinta 4"
      ></duet-checkbox>
      <duet-checkbox
        name="assets"
        checked={value.assets}
        onduetChange={handleAssetOriginChange}
        label="Valinta 5"
      ></duet-checkbox>
      <duet-checkbox
        name="otherIncome"
        checked={value.otherIncome}
        onduetChange={handleAssetOriginChange}
        label="Valinta 6"
      ></duet-checkbox>

      <duet-checkbox
        name="extras"
        checked={hasExtras}
        onduetChange={handleExtrasChange}
        label="Muu, mikä?"
      ></duet-checkbox>
      {hasExtras && (
        <div>
          <duet-input
            value={value.extras}
            onduetChange={handleExtraDetailsChange}
            label="Kerro sijoitettavien varojen muu alkuperä"
            labelHidden
          ></duet-input>
        </div>
      )}
    </div>
  )
}
