import React, { useState } from 'react'
import { apiActivateLicense } from '../../api/licenseApi'
import LabelField from '../fields/LabelField'
import TextField from '../fields/TextField'
import Heading from '../Heading'
import SaveButton from '../SaveButton'

const LicenseTab = () => {
  const [license, setLicense] = useState('')
  const [activating, setActivating] = useState(false)
  const [deactivating, setDeactivating] = useState(false)
  const handleChange = (e) => {
    setLicense(e.target.value)
  }
  const handleActivate = e => {
    apiActivateLicense(license)
  }
  const handleDeactivate = e => {
    // apiActivateLicense(license)
  }
  return (
    <div className="dreamfox-tab">
      <Heading text="License" />
      <div className="dreamfox-tab__content">
        <p>Please enter the license key for this product to activate it. You were given a license key when you purchased this item.</p>
        <table>
          <tr>
            <td>
              <LabelField>License Key</LabelField>
            </td>
            <td>
              <TextField options={{
                value: license,
                onChange: handleChange,
              }}></TextField>
            </td>
          </tr>
        </table>
        <div className="dreamfox-license-actions">
          <SaveButton saving={activating} text={'Activate'} onClick={handleActivate} />
          <SaveButton saving={deactivating} text={'Deactivate'} className={'button-large button-secondary'}  onClick={handleDeactivate} />
        </div>
      </div>
    </div>
  )
}

export default LicenseTab
