import React, { useState, useEffect } from 'react'
import { useHistory, Redirect } from 'react-router-dom'
import {
  Container,
  Heading,
  Button,
  Segment,
  Message,
  Form,
  Input,
  Transition,
  Select,
  Checkbox,
  FormControl,
  FormLabel,
  FormErrorMessage,
  FormHelperText,
  VStack,
  Stack,
  StackDivider,
  Box,
  Text,
  List, ListItem, ListIcon, OrderedList, UnorderedList,
} from '@chakra-ui/react'
import {
  Divider,
  Grid,
} from 'semantic-ui-react'
import http from '../utils/http'

const DockerContainerList = () => {
  const [containers, setContainers] = useState([])
  const [isError, setError] = useState(false)
  const [message, setMessage] = useState('')

  const history = useHistory()

  const getContainerList = () => {
    http.get('/docker/container/list').then(response => {
      const { status, data, message } = response.data
      if (status) {
        const { containers } = data
        setContainers(containers)
      } else {
        setError(true)
        setMessage(message)
      }
    })
  }

  useEffect(() => {
    getContainerList()
  }, [])

  return (
    <Container>
      <Divider hidden/>
      <Heading>Container List</Heading>

      <Grid>
        <Grid.Column
          floated='right' width={3}
        >
          <Button
            size='xs'
            colorScheme='blue'
            onClick={() => history.push('/docker/container/create')}
          >
            New Container
          </Button>
        </Grid.Column>
      </Grid>

      <Divider hidden/>

      <UnorderedList>
        {containers.map((container, key) => (
          <ListItem key={key}>
            {container.name}
          </ListItem>
        ))}
      </UnorderedList>
    </Container>
  )
}

export default DockerContainerList