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

const ImageBlock = ({ title, desc, ...rest }) => {
  return (
    <Box p={5} shadow="md" borderWidth="1px" {...rest}>
      <Heading fontSize="xl">{title}</Heading>
      <Text mt={4}>{desc}</Text>
    </Box>
  )
}

const DockerImageList = () => {
  const [token, setToken] = useState('')
  const [images, setImages] = useState([])

  const history = useHistory()

  const setTokenFromLocalStorage = () => {
    const token = localStorage.getItem('token')
    setToken(token)
  }

  const getImages = () => {
    http.get('/image/list', {
      headers: {
        Authorization: `token ${token}`,
      },
    }).then(response => {
      const { success, code, data, message } = response.data
      if (success) {
        const { count, data } = data
        setImages(data)
      }
    })
  }

  useEffect(() => {
    setTokenFromLocalStorage()
    getImages()
  }, [])

  return (
    <Container>
      <Divider hidden />
      <Heading>Image List</Heading>
      <Divider hidden />
      <Grid>
        <Grid.Column
          floated='right' width={3}
        >
          <Button
            size='xs'
            colorScheme='blue'
            onClick={() => history.push('/docker/image/create')}
          >
            New Image
          </Button>
        </Grid.Column>
      </Grid>
      {images.map(image => (
        <ImageBlock
          title={image.name}
          desc={image.name}
        />
      ))}
    </Container>
  )
}

export default DockerImageList