// SpotlightTooltip.js
import PropTypes from 'prop-types'
import { Descriptions, Card, Flex, Typography, Skeleton, Spin } from 'antd'
import { LoadingOutlined } from '@ant-design/icons'
import { useEffect, useState, useContext, useCallback } from 'react'
import { AuthContext } from '../context/AuthContext'
import ObjectProperty from './ObjectProperty'
import InfoCircleIcon from '../../Icons/InfoCircleIcon'
import { ApiServerContext } from '../context/ApiServerContext'

const { Text } = Typography

const SpotlightTooltip = ({ query, type }) => {
  const [spotlightData, setSpotlightData] = useState(null)
  const [loading, setLoading] = useState(true)
  const [initialized, setInitialized] = useState(false)

  const { token } = useContext(AuthContext)
  const { fetchSpotlightData } = useContext(ApiServerContext)

  const fetchSpotlight = useCallback(async () => {
    setLoading(true)
    const data = await fetchSpotlightData(query)
    setSpotlightData(data)
    setLoading(false)
  }, [query, fetchSpotlightData])

  useEffect(() => {
    if (token != null && initialized == false) {
      fetchSpotlight()
      console.log('Fetching spotlight...')
      setInitialized(true)
    }
  }, [token, fetchSpotlight, initialized])

  if (!spotlightData && !loading) {
    return (
      <Card className='spotlight-tooltip'>
        <Flex
          justify='center'
          gap={'small'}
          style={{ height: '100%', minWidth: '270px' }}
          align='center'
        >
          <Text type='secondary'>
            <InfoCircleIcon />
          </Text>
          <Text type='secondary'>No spotlight data.</Text>
        </Flex>
      </Card>
    )
  }

  // Helper to determine property type based on key and value
  const getPropertyType = (key, value) => {
    if (key === '_id') {
      return 'id'
    }
    if (key === 'createdAt' || key === 'updatedAt') {
      return 'dateTime'
    }
    if (typeof value === 'boolean') {
      return 'bool'
    }
    return key
  }

  // Map of property names to user-friendly labels
  const LABEL_MAP = {
    name: 'Name',
    state: 'State',
    tags: 'Tags',
    email: 'Email',
    updatedAt: 'Updated At',
    _id: 'ID'
    // Add more mappings as needed
  }

  return (
    <div className='spotlight-tooltip'>
      <Spin indicator={<LoadingOutlined />} spinning={loading}>
        <Descriptions bordered column={1} size='small'>
          {loading ? (
            <>
              <Descriptions.Item
                label={
                  <Skeleton.Input active size='small' style={{ width: 80 }} />
                }
              >
                <Skeleton.Input active size='small' style={{ width: 120 }} />
              </Descriptions.Item>
              <Descriptions.Item
                label={
                  <Skeleton.Input active size='small' style={{ width: 80 }} />
                }
              >
                <Skeleton.Input active size='small' style={{ width: 120 }} />
              </Descriptions.Item>
              <Descriptions.Item
                label={
                  <Skeleton.Input active size='small' style={{ width: 80 }} />
                }
              >
                <Skeleton.Input active size='small' style={{ width: 120 }} />
              </Descriptions.Item>
            </>
          ) : (
            Object.entries(spotlightData).map(([key, value]) =>
              value !== undefined &&
              value !== null &&
              value !== '' &&
              key !== 'objectType' ? (
                <Descriptions.Item
                  key={key}
                  label={
                    LABEL_MAP[key] || key.charAt(0).toUpperCase() + key.slice(1)
                  }
                >
                  <ObjectProperty
                    type={getPropertyType(key)}
                    value={value}
                    objectData={spotlightData}
                    objectType={type}
                    isEditing={false}
                    longId={false}
                    showSpotlight={false}
                    showLabel={false}
                    showName={false}
                    showId={false}
                    showQuantity={false}
                  />
                </Descriptions.Item>
              ) : null
            )
          )}
        </Descriptions>
      </Spin>
    </div>
  )
}

SpotlightTooltip.propTypes = {
  query: PropTypes.string.isRequired,
  type: PropTypes.string.isRequired
}

export default SpotlightTooltip