import React, { useEffect, useState } from 'react'
import {
  BrowserRouter,
  Route,
  Redirect,
  Switch,
  Link,
  useHistory,
} 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,
  Table,
  Thead,
  Tbody,
  Tfoot,
  Tr,
  Th,
  Td,
  TableCaption,
  Flex,
  HStack,
  Wrap,
} from '@chakra-ui/react'
import {
  Tab,
  Divider,
} from 'semantic-ui-react'
import http from '../utils/http'

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

const Index = () => {
  const [token, setToken] = useState('')
  const [currentTab, setCurrentTab] = useState('')
  const [me, setMe] = useState({})

  const history = useHistory()

  const panes = [
    {
      menuItem: 'Tab 1',
      render: () => <Tab.Pane attached={false}>Tab 1 Content</Tab.Pane>,
    },
    {
      menuItem: 'Tab 2',
      render: () => <Tab.Pane attached={false}>Tab 2 Content</Tab.Pane>,
    },
    {
      menuItem: 'Tab 3',
      render: () => <Tab.Pane attached={false}>Tab 3 Content</Tab.Pane>,
    },
  ]

  const whoAmI = () => {
    http.get('/info/user', {
      headers: {
        Authorization: `token ${token}`,
      },
    }).then(response => {
      const { success, code, data, message } = response.data
      if (success) {
        setMe(data)
      }
    })
  }

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

    if (token) {
      whoAmI()
    }
  })

  return (
    <Container>
      <Divider hidden/>

      {me.name ? (
        <Heading size="md">
          Hi {me.name}
        </Heading>
      ) : (
        <Wrap justify="right">
          <Button size="xs" colorScheme="blue" variant="outline"
                  onClick={() => history.push('/sign-in')}
          >
            SIGN IN
          </Button>
          <Button size="xs" colorScheme="blue"
                  onClick={() => history.push('/sign-up')}
          >
            SIGN UP
          </Button>
        </Wrap>
      )}

      <Heading>The Infrastructure Cloud</Heading>
      <Text>Easily deploy cloud servers, bare metal, and storage
        worldwide!</Text>

      <Divider hidden/>


      <Stack spacing={8}>
        <Feature
          title="Cloud Compute"
          desc="Powerful compute instances with Intel CPUs and 100% SSD storage."
        />

        <Feature
          title="Bare Metal"
          desc="Fully automated dedicated servers with zero virtualization layer."
        />
      </Stack>

      <Divider hidden/>

      <Stack spacing={8}>
        <Feature
          title="Block Storage"
          desc="Fast SSD-backed scalable and redundant storage with up to 10TB volumes."
        />

        <Feature
          title="Dedicated Cloud"
          desc="Dedicated cloud compute instances without the noisy neighbors."
        />
      </Stack>

      <Divider hidden/>
    </Container>
  )
}

export default Index