/**
 * @format
 */
import React, {useState, useEffect} from 'react'
import axios from 'axios'
import {Box, Text, Button, HStack} from '@chakra-ui/react'
import {Env} from '../../types/env'

declare global {
  interface Window {
    env: Env
  }
}
// eslint-disable-next-line no-undef
const Dashboard: () => JSX.Element = () => {
  const [initialData, setInitialData] = useState()

  const getData = async () => {
    const {data} = await axios.get(window.env?.SERVER_URL! || process.env.SERVER_URL!)
    setInitialData(data)
  }

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

  const newSecondDate = new Date()
  newSecondDate.setDate(newSecondDate.getDate() - 5)

  return (
    <Box textAlign="center" fontSize="xl" p="16">
      <div>
        {/* <VantageDatePicker anotherDate={endDate} selected={startDate} datePickerType="startDate" />
        <VantageDatePicker anotherDate={startDate} selected={endDate} datePickerType="endDate" />
        <VantageDatePicker anotherDate={startDate} selected={endDate} /> */}
      </div>
      <Text variant="h1">Hello H1</Text>
      <Text variant="h2">Hello H2</Text>
      <Text variant="h3">Hello H3</Text>
      <Text>Hello Plain Text</Text>
      <HStack spacing="24px" m="16" align="center" justifyContent="center">
        <Button variant="primary">Primary</Button>
        <Button>Default</Button>
      </HStack>
      <Text variant="h3">{`${initialData} from backend`}</Text>
    </Box>
  )
}

export default Dashboard