text: /* ------------------------------------------------------------------------- *
   * Copyright 2002-2021, OpenNebula Project, OpenNebula Systems               *
   *                                                                           *
   * Licensed under the Apache License, Version 2.0 (the "License"); you may   *
   * not use this file except in compliance with the License. You may obtain   *
   * a copy of the License at                                                  *
   *                                                                           *
   * http://www.apache.org/licenses/LICENSE-2.0                                *
   *                                                                           *
   * Unless required by applicable law or agreed to in writing, software       *
   * distributed under the License is distributed on an "AS IS" BASIS,         *
   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.  *
   * See the License for the specific language governing permissions and       *
   * limitations under the License.                                            *
   * ------------------------------------------------------------------------- */
  /* eslint-disable jsdoc/require-jsdoc */
  import { useEffect, useState, memo } from 'react'
  import { Redirect, useHistory } from 'react-router'
  
  import { NavArrowLeft as ArrowBackIcon } from 'iconoir-react'
  import { makeStyles, Container, LinearProgress, IconButton, Typography } from '@material-ui/core'
  
  import { useFetch, useSocket } from 'client/hooks'
  import { useProviderApi } from 'client/features/One'
  import DebugLog from 'client/components/DebugLog'
  import ProvisionForm from 'client/containers/Provisions/Form/ProvisionForm'
  import { PATH } from 'client/apps/provision/routes'
  import { Translate } from 'client/components/HOC'
  import { T } from 'client/constants'
  
  const useStyles = makeStyles({
    container: {
      display: 'flex',
      flexDirection: 'column'
    },
    title: {
      marginBottom: '1em',
      display: 'inline-flex',
      alignItems: 'center',
      gap: '0.8em'
    }
  })
  
  function ProvisionCreateForm () {
    const classes = useStyles()
    const [uuid, setUuid] = useState(undefined)
  
    const { getProvisionSocket: socket } = useSocket()
    const { getProviders } = useProviderApi()
    const { data, fetchRequest, loading, error } = useFetch(getProviders)
  
    const handleSetUuid = response => response && setUuid(response)
  
    useEffect(() => { fetchRequest() }, [])
  
    if (uuid) {
      return <DebugLog {...{ uuid, socket, title: <Title /> }} />
    }
  
    if (error) {
      return <Redirect to={PATH.PROVISIONS.LIST} />
    }
  
    return !data || loading ? (
      <LinearProgress color='secondary' />
    ) : (
      <Container className={classes.container} disableGutters>
        <ProvisionForm handleAfterCreate={handleSetUuid} />
      </Container>
    )
  }
  
  const Title = memo(() => {
    const classes = useStyles()
    const history = useHistory()
    const backToProvisionList = () => history.push(PATH.PROVISIONS.LIST)
  
    return (
      <div className={classes.title}>
        <IconButton size='medium' onClick={backToProvisionList}>
          <ArrowBackIcon />
        </IconButton>
        <Typography variant='body1' component='span'>
          <Translate word={T.BackToList} values={T.Provisions} />
        </Typography>
      </div>
    )
  })
  
  Title.displayName = 'BackToProvisionList'
  
  export default ProvisionCreateForm
  