import React from 'react'

import {
  Anchor,
  Breadcrumbs,
  Divider,
  Group,
  Loader,
  Text
} from '@mantine/core'
import { useLocation, useNavigate, useParams } from 'react-router-dom'

import { ActivitiesGetActivityResponse } from '@clinic/client'
import { eventDetailTelemetry } from '~/telemetry/event-center'

import { useGetEvent } from '../shared/api'
import { DetailInfo } from './DetailInfo'

const EventDetailPage: React.FC = () => {
  const { eid } = useParams()
  const { data, error } = useGetEvent({ eventId: eid! })
  const loading = !data && !error

  return (
    <div className='bg-white'>
      <Header id={eid!} detailInfo={data?.data} />
      {loading ? (
        <Group className='py-4' position='center'>
          <Loader variant='bars' size='xs' />
        </Group>
      ) : (
        <DetailInfo detailInfo={data?.data!} />
      )}
    </div>
  )
}

interface HeaderProps {
  id: string
  detailInfo?: ActivitiesGetActivityResponse
}

const Header: React.FC<HeaderProps> = ({ id, detailInfo }) => {
  const location = useLocation()
  const navigate = useNavigate()
  return (
    <>
      <div className='px-6 py-4'>
        <Breadcrumbs>
          <Anchor
            color='blue'
            onClick={() => {
              const pathSegment = location.pathname.split('/')
              const eventCenterPath = pathSegment
                .slice(0, pathSegment.length - 2)
                .join('/')
              navigate(`${eventCenterPath}/history`, { replace: true })
              eventDetailTelemetry.clickBreadcrumbs()
            }}
          >
            History Events
          </Anchor>
          <Text>{detailInfo ? detailInfo.name : `Loading...(${id})`}</Text>
        </Breadcrumbs>
      </div>
      <Divider size='sm' />
    </>
  )
}

export default EventDetailPage