import {faPlus, faSpinner} from '@fortawesome/free-solid-svg-icons'
import get from 'lodash/get'
import React from 'react'
import {useDispatch} from 'react-redux'

import {Button} from 'lib/components/buttons'
import Icon from 'lib/components/icon'
import {File, Text, Checkbox} from 'lib/components/input'
import message from 'lib/message'

import {uploadOpportunityDataset} from '../actions'

/** Create an opportunity dataset by uploading files */
export default function UploadOpportunityDataset(p) {
  const [name, setName] = React.useState('')
  const [files, setFiles] = React.useState()
  const [uploading, setUploading] = React.useState(false)
  const [isCSV, setIsCSV] = React.useState(false)
  const [freeform, setFreeForm] = React.useState(false)
  const [paired, setPaired] = React.useState(false)
  const formRef = React.useRef()
  const dispatch = useDispatch()

  function submit(e) {
    e.preventDefault()
    const body = new window.FormData(formRef.current)
    body.append('freeform', freeform)
    setUploading(true)
    dispatch(uploadOpportunityDataset(body))
  }

  function onChangeFiles(e) {
    const files = e.target.files
    setFiles(files)
    // signal if it's a CSV file; if so, we need to show extra fields
    // if it's a shapefile, this is not needed
    setIsCSV(
      get(files, 'length') === 1 &&
        get(files, '[0].name', '')
          .toLowerCase()
          .endsWith('.csv')
    )
  }

  return (
    <>
      <h5>{message('analysis.createGrid')}</h5>
      <p>{message('analysis.createGridTooltip')}</p>
      <form encType='multipart/form-data' ref={formRef}>
        <Text
          name='Name'
          label={`${message('analysis.gridName')}*`}
          value={name}
          onChange={e => setName(e.target.value)}
        />

        <File
          multiple
          label={`${message('analysis.gridFiles')}*`}
          name='files'
          onChange={onChangeFiles}
        />

        {isCSV && (
          <>
            <Text name='latField' label={message('analysis.latField')} />

            <Text name='lonField' label={message('analysis.lonField')} />

            <Checkbox
              label={message('opportunityDatasets.freeform')}
              checked={freeform}
              onChange={e => setFreeForm(e.target.checked)}
            />

            {freeform && (
              <>
                <Text name='idField' label={message('analysis.idField')} />

                <Checkbox
                  label={message('opportunityDatasets.paired')}
                  checked={paired}
                  onChange={e => setPaired(e.target.checked)}
                />

                {paired && (
                  <>
                    <Text
                      name='latField1'
                      label={message('analysis.latField')}
                    />

                    <Text
                      name='lonField1'
                      label={message('analysis.lonField')}
                    />
                  </>
                )}
              </>
            )}
          </>
        )}

        <Button
          className='btn btn-block btn-success'
          disabled={uploading || !name || !files}
          onClick={submit}
          type='success'
        >
          {uploading ? (
            <>
              <Icon icon={faSpinner} fixedWidth spin />{' '}
              {message('analysis.uploading')}
            </>
          ) : (
            <>
              <Icon icon={faPlus} fixedWidth /> {message('analysis.createGrid')}
            </>
          )}
        </Button>
      </form>
    </>
  )
}

@@ -264,18 +264,8 @@
 Text
-, Checkbox
 %7D fr
@@ -679,32 +679,35 @@
 seState(false)%0A 
+ //
  const %5Bfreeform
@@ -738,32 +738,35 @@
 seState(false)%0A 
+ //
  const %5Bpaired, 
@@ -970,16 +970,19 @@
 ent)%0A   
+ //
  body.ap
@@ -2123,32 +2123,36 @@
  /%3E%0A%0A           
+ %7B/*
  %3CCheckbox%0A     
@@ -2307,32 +2307,36 @@
 %7D%0A            /%3E
+ */%7D
 %0A%0A            %7Bf
@@ -2334,16 +2334,19 @@
        %7B
+/* 
 freeform
@@ -3061,32 +3061,35 @@
 /%3E%0A            )
+ */
 %7D%0A          %3C/%3E%0A

Remove freeform pointset options until the backend changes are approved.