import React, { useEffect, useState } from 'react'
import {
  Container,
  Heading,
  Button,
  Text,
  Box, Alert, AlertIcon,
  AlertDialog,
  AlertDialogContent,
  AlertDialogOverlay,
} from '@chakra-ui/react'
import {
  Divider,
  TextArea,
  Header,
  Grid,
  Form,
} from 'semantic-ui-react'
import http from '../utils/http'
import { useHistory } from 'react-router-dom'


const DockerImageCreate = () => {
  const [token, setToken] = useState('')
  const [dockerfile, setDockerfile] = useState('')
  const [isSuccess, setSuccess] = useState(false)

  const history = useHistory()

  const uploadDockerfile = () => {
    http.post('/dockerfile/add', {
      content: dockerfile,
    }, {
      headers: {
        Authorization: `token ${token}`,
      }
    }).then(response => {
      const {success, data, message} = response.data
      if (success) {
        setSuccess(success)
        setTimeout(2000, () => {
          history.push('/docker/image/list')
        })
      }
    })
  }

  useEffect(() => {
    const token = localStorage.getItem('token')
    setToken(token)
  }, [])

  return (
    <Container>
      <Divider hidden/>
      <Heading>Upload Your Dockerfile</Heading>

      <Divider hidden />

      <Form>
        <span>dockerfile : </span>
        <TextArea
          value={dockerfile}
          rows={dockerfile.split('\n').length + 2}
          onChange={(e, {value}) => setDockerfile(value)}
        />
      </Form>
      <Divider hidden/>
      <Grid>
        <Grid.Column
          width={3}
          floated='right'
        >
          <Button
            size='sm'
            colorScheme='teal'
            onClick={() => uploadDockerfile()}
          >
            Upload
          </Button>
        </Grid.Column>
      </Grid>


      <AlertDialog
        isOpen={isSuccess}
        onClose={() => setSuccess(false)}
      >
        <AlertDialogOverlay>
          <AlertDialogContent>
            <Alert status="success">
              <AlertIcon />
              Successfully uploaded !
            </Alert>
          </AlertDialogContent>
        </AlertDialogOverlay>
      </AlertDialog>
    </Container>
  )
}

export default DockerImageCreate