import React, { useState } from 'react'
import Heading from '../Heading'
import TableRowSupport from '../TableRowSupport';
import TextField from '../fields/TextField'
import TextAreaField from '../fields/TextAreaField'
import SaveButton from '../SaveButton'
import { apiSendSupport } from '../../api/supportApi';

const SupportTab = () => {
  const [sending, setSending] = useState(false)
  const [name, setName] = useState('')
  const [email, setEmail] = useState('')
  const [pluginName, setPluginName] = useState('')
  const [versionNumber, setVersionNumber] = useState('')
  const [license, setLicense] = useState('')
  const [details, setDetails] = useState('')
  const values = [
    {type: TextField, value: name, label: 'Name', id: 'name', callback: setName},
    {type: TextField, value: email, label: 'Email', id: 'email', callback: setEmail},
    {type: TextField, value: pluginName, label: 'Plugin Name', id: 'pluginName', callback: setPluginName},
    {type: TextField, value: versionNumber, label: 'Version Number', id: 'versionNumber', callback: setVersionNumber},
    {type: TextField, value: license, label: 'License', id: 'license', callback: setLicense},
    {type: TextAreaField, value: details, label: 'Details of Problem', id: 'details', callback: setDetails},
  ]
  const handleSendSupport = () => {
    console.log('handleSendSupport')
    setSending(true)

    apiSendSupport({
      name: name,
      email: email,
      pluginName: pluginName,
      versionNumber: versionNumber,
      license: license,
      details: details,
    }, response => {
      console.log('response')
      console.log(response)
      setSending(false)
    })
  }
  return (
    <div className="dreamfox-tab">
      <Heading text="Support" />
      <div className="dreamfox-tab__content">
        <table>
          <tbody>
            {values.map(item => <TableRowSupport key={item.id} label={item.label}>
              <item.type options={{
                name: item.label,
                value: item.value,
                onChange: e => item.callback(e.target.value)
              }} />
            </TableRowSupport>)}
          </tbody>
        </table>
        <SaveButton saving={sending} text="Submit Support Ticket" onClick={handleSendSupport} loadingText="Sending..."></SaveButton>
      </div>
    </div>
  )
}

export default SupportTab
