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

const DockerContainerCreate = () => {
  const [images, setImages] = useState([])
  const [image, setImage] = useState('')
  const [containerName, setContainerName] = useState('')
  const [ssh, setSsh] = useState('')
  const [port, setPort] = useState(0)
  const [randomPort, setRandomPort] = useState(false)
  const [isSuccess, setSuccess] = useState(false)
  const [isLoading, setLoading] = useState(false)
  const [error, setError] = useState('')

  const history = useHistory()

  const loadImages = () => {
    setLoading(true)
    http.get('/docker/image/list').then(response => {
      const { status, message } = response.data
      const images = response.data.data
      setLoading(false)

      if (status) {
        setImages(images)
      } else {
        setError(message)
        console.log('[ ERROR ]', message)
      }

    }).catch(error => {
      console.error(error)
    })
  }

  const getImageDropdownOptions = () => {
    const defaultImage = {
      key: 999,
      value: 'default',
      text: 'default image',
    }

    return [defaultImage].concat(images.map((image, key) => {
      return {
        key: key,
        value: image.Id,
        text: image.RepoTags.length > 0 ? image.RepoTags[0] : ' - ',
      }
    }))
  }

  const createContainer = () => {
    setLoading(true)
    setError('')
    console.log('[ DEBUG ] image :', image)
    http.post('/docker/container/create', {
      name: containerName,
      image: image,
      port: port,
      random_port: randomPort,
    }).then(response => {
      const { status, message } = response.data
      const { username, password, port } = response.data.data
      setLoading(false)

      if (!status) {
        setError(message)
      } else {
        setSuccess(true)
        setSsh(
          `ssh ${username}@${window.location.hostname} -p ${port} # (password : ${password})`)
      }

      // setTimeout(() => setSuccess(false), 10000);
    }).catch(error => {
      console.error('[ ERROR ]', error)
    })
  }

  const handleImage = (e, data) => {
    setImage(data.value)
  }

  const handleContainerName = (e) => {
    setContainerName(e.target.value)
  }

  const handlePort = (e) => {
    setPort(e.target.value)
  }

  const handleRandomPort = () => {
    setRandomPort(!randomPort)
  }

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

  return (
    <Container>
      <Divider hidden/>
      <Heading>Create Docker Container</Heading>

      <VStack
        divider={<StackDivider borderColor="gray.200"/>}
        spacing={4}
        align="stretch"
      >
        <FormControl id="container" isRequired>
          <FormLabel>Container Name</FormLabel>
          <Input
            type="email"
            placeholder='Container Name'
          />
          <FormHelperText>컨테이너 이름을 입력해주세요.</FormHelperText>
        </FormControl>

        <FormControl id="image">
          <FormLabel>Image</FormLabel>
          <Select placeholder="생성할 컨테이너의 OS를 설정해주세요">
            <option value="ubuntu 18.04">Ubuntu 18.04.5 LTS</option>
            <option value="ubuntu 20.04">Ubuntu 20.04.2 LTS</option>
          </Select>
        </FormControl>

        <Button size="md" colorScheme="green" mt="24px"
          onClick={() => createContainer()}
        >
          Create Container
        </Button>
      </VStack>


    </Container>
  )
}

export default DockerContainerCreate