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,
} 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/>
      <Segment raised>
        <Heading size='huge'>Create your own docker container</Heading>
        <Divider hidden/>

        <FormControl id="container">
          <FormLabel>Container Name</FormLabel>
          <Input
            type="email"
            placeholder='Container Name'
          />
          <FormHelperText>컨테이너 이름을 입력해주세요.</FormHelperText>
        </FormControl>

        <div>
          <Input
            label='Container Name'
            placeholder='Container Name'
            onChange={handleContainerName}
          />

          <Select label='Image'>
            <option value="option1">Option 1</option>
            <option value="option2">Option 2</option>
            <option value="option3">Option 3</option>
          </Select>

          {/*<Form.Group>
            <Form.Dropdown
              label='Image'
              selection
              options={getImageDropdownOptions()}
              defaultValue={getImageDropdownOptions()[0]}
              onChange={handleImage}
            />
          </Form.Group>*/}

          <Input
            type='number'
            label='SSH Port'
            placeholder='22'
            disabled={randomPort}
            onChange={handlePort}
          />

          {/*<Form.Group>
            <Form.Input
              type='number'
              label='SSH Port'
              placeholder='22'
              disabled={randomPort}
              onChange={handlePort}
            />
          </Form.Group>*/}
          <Checkbox
            label='Use random port'
            checked={randomPort}
            onChange={handleRandomPort}
          />
          <Button
            color='violet'
            onClick={createContainer}
            content='Create'
          />
          <Button
            content='Container List'
            onClick={() => history.push('/docker/container/')}
          />
        </div>
        {/*
        <Transition.Group
          duration={300}
        >
          {isSuccess && (
            <>
              <Divider/>
              <Message
                success
                content={ssh}
              />
            </>
          )}
          {error && (
            <>
              <Divider/>
              <Message
                error
                content={error}
              />
            </>
          )}
        </Transition.Group>*/}
      </Segment>
    </Container>
  )
}

export default DockerContainerCreate