// @flow
import React, { useState } from "react"
import { withStyles } from "@material-ui/core/styles"
import Grid from "@material-ui/core/Grid"
import RadioGroup from "@material-ui/core/RadioGroup"
import Radio from "@material-ui/core/Radio"
import FormControlLabel from "@material-ui/core/FormControlLabel"
import TextField from "../TextField"
import styles from "../formStyles"

type Props = {
  /** Material-UI styling */
  classes: Object,
  /** Function for handling radio button selection */
  handleChange: Function,
}

/**
 * ShippingMethod contains radio buttons and a text field for listing courier information.
 */

const ShippingMethod = (props: Props) => {
  const [shipAccountNum, setShipAccountNum] = useState(true)
  const { classes, handleChange, setFieldValue } = props

  return (
    <Grid
      container
      justify="center"
      alignItems="center"
      className={classes.innerForm}>
      <Grid item xs={3}>
        <span className={classes.requiredText}>*</span> Shipping Account:
      </Grid>
      <Grid item xs={8}>
        <RadioGroup
          aria-label="Shipping Account"
          name="shippingAccount"
          onChange={handleChange}
          row>
          <FormControlLabel
            value="fedex"
            control={<Radio />}
            label="FedEx"
            onChange={() => setShipAccountNum(true)}
          />
          <FormControlLabel
            value="ups"
            control={<Radio />}
            label="UPS"
            onChange={() => setShipAccountNum(true)}
          />
          <FormControlLabel
            value="dhl"
            control={<Radio />}
            label="DHL"
            onChange={() => setShipAccountNum(true)}
          />
          <FormControlLabel
            value="prepaid"
            control={<Radio />}
            label="Send prepaid shipping label"
            onChange={() => {
              setShipAccountNum(false)
              setFieldValue(
                "shippingAccountNumber",
                "sending prepaid shipping label",
              )
            }}
          />
        </RadioGroup>
        {shipAccountNum && (
          <TextField
            type="text"
            name="shippingAccountNumber"
            placeholder="Shipping Account Number"
          />
        )}
      </Grid>
    </Grid>
  )
}

export default withStyles(styles)(ShippingMethod)

@@ -725,16 +725,76 @@
 e(true)%0A
+  const %5BprepaidNotice, setPrepaidNotice%5D = useState(false)%0A
   const 
@@ -1377,32 +1377,48 @@
  onChange=%7B() =%3E
+ %7B%0A             
  setShipAccountN
@@ -1417,32 +1417,84 @@
 AccountNum(true)
+%0A              setPrepaidNotice(false)%0A            %7D
 %7D%0A          /%3E%0A 
@@ -1619,32 +1619,48 @@
  onChange=%7B() =%3E
+ %7B%0A             
  setShipAccountN
@@ -1659,32 +1659,84 @@
 AccountNum(true)
+%0A              setPrepaidNotice(false)%0A            %7D
 %7D%0A          /%3E%0A 
@@ -1869,16 +1869,32 @@
 e=%7B() =%3E
+ %7B%0A             
  setShip
@@ -1909,16 +1909,68 @@
 um(true)
+%0A              setPrepaidNotice(false)%0A            %7D
 %7D%0A      
@@ -2173,32 +2173,69 @@
 countNum(false)%0A
+              setPrepaidNotice(true)%0A
               se
@@ -2593,16 +2593,362 @@
      )%7D%0A
+        %7BprepaidNotice && (%0A          %3Cdiv className=%7Bclasses.panelBlue%7D%3E%0A            If using a prepaid shipping label, please send ASAP to%7B%22 %22%7D%0A            %3Cu%3E%0A              %3Ca href=%22mailto:dictystocks@northwestern.edu%22 target=%22_top%22%3E%0A                dictystocks@northwestern.edu%0A              %3C/a%3E%0A            %3C/u%3E%0A          %3C/div%3E%0A        )%7D%0A
       %3C/

add note to send prepaid shipping label ASAP