import { useContext, useEffect, useState } from 'react'
import { Space, Tag } from 'antd'
import { LoadingOutlined } from '@ant-design/icons'
import { useNavigate } from 'react-router-dom'
import { ApiServerContext } from '../context/ApiServerContext'
import Tooltip from './Tooltip'
import CloudIcon from '../../Icons/CloudIcon'
import DeveloperIcon from '../../Icons/DeveloperIcon'

const DashboardDevControls = () => {
  const { connecting, connected } = useContext(ApiServerContext)
  const navigate = useNavigate()
  const [apiServerState, setApiServerState] = useState('disconnected')

  useEffect(() => {
    if (connecting == true) {
      setApiServerState('connecting')
    } else if (connected == true) {
      setApiServerState('connected')
    } else {
      setApiServerState('disconnected')
    }
  }, [connecting, connected])

  if (import.meta.env.MODE !== 'development') return null

  return (
    <Space>
      {apiServerState === 'connected' ? (
        <Tooltip content='Connected to api server'>
          <Tag
            color='success'
            style={{ marginRight: 0 }}
            icon={<CloudIcon />}
          />
        </Tooltip>
      ) : null}
      {apiServerState === 'connecting' ? (
        <Tooltip content='Connecting to api server...'>
          <Tag
            color='warning'
            style={{ marginRight: 0 }}
            icon={<LoadingOutlined />}
          />
        </Tooltip>
      ) : null}
      {apiServerState === 'disconnected' ? (
        <Tooltip content='Disconnected from api server'>
          <Tag
            color='error'
            style={{ marginRight: 0 }}
            icon={<CloudIcon />}
          />
        </Tooltip>
      ) : null}
      <Tooltip content='Developer'>
        <Tag
          color='yellow'
          style={{ marginRight: 0 }}
          icon={<DeveloperIcon />}
          onClick={() => {
            navigate('/dashboard/developer/sessionstorage')
          }}
        />
      </Tooltip>
    </Space>
  )
}

export default DashboardDevControls