import React, { useEffect, useLayoutEffect, useRef, useState } from 'react'

import Cookies from '@/frame/components/lib/cookies'

import { UnderlineNav } from '@primer/react'

import { sendEvent } from '@/events/components/events'

import { EventType } from '@/events/types'

import { useRouter } from 'next/router'

import styles from './InArticlePicker.module.scss'

const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect

type Option = {

value: string

label: string

}

type Props = {

// Use this if not specified on the query string

defaultValue?: string

// Use this if not specified on the query string or no cookie

fallbackValue: string

cookieKey: string

queryStringKey: string

onValue: (value: string) => void

preferenceName: string

options: Option[]

ariaLabel: string

}

export const InArticlePicker = ({

defaultValue,

fallbackValue,

cookieKey,

queryStringKey,

onValue,

preferenceName,

options,

ariaLabel,

}: Props) => {

const router = useRouter()

const { query, locale } = router

const [currentValue, setCurrentValue] = useState('')

// Tracks whether the last currentValue change was triggered by a user click

// (as opposed to initial mount or external navigation). When true, we move

// focus to the newly-selected tab so keyboard users don't lose their place.

const focusAfterNavRef = useRef(false)

// Run on mount for client-side only features

useEffect(() => {

const raw = query[queryStringKey]

let value = ''

if (raw) {

if (Array.isArray(raw)) value = raw[0]

else value = raw

}

// Only pick it up from the possible query string if its value

// is a valid option.

const possibleValues = options.map((option) => option.value)

if (!value || !possibleValues.includes(value)) {

const cookieValue = Cookies.get(cookieKey)

if (defaultValue) {

value = defaultValue

} else if (cookieValue && possibleValues.includes(cookieValue)) {

value = cookieValue

} else {

value = fallbackValue

}

}

setCurrentValue(value)

}, [query, fallbackValue, defaultValue, options])

const [asPathRoot, asPathQuery = ''] = router.asPath.split('#')[0].split('?')

// Use a layout effect so the DOM mutation (hiding non-matching .ghd-tool

// content) happens before the browser paints. With React 19's stricter

// effect timing, a regular useEffect could leave non-matching content

// visible on initial page load until after first paint.

useIsomorphicLayoutEffect(() => {

// This will make the hook run this callback on mount and on change.

// That's important because even though the user hasn't interacted

// and made an overriding choice, we still want to run this callback

// because the page might need to be corrected based on *a* choice

// independent of whether it's a change.

if (currentValue) {

onValue(currentValue)

}

}, [

currentValue,

// This is important because we can't otherwise rely on the firing

// of this effect on initial mount. It also needs to fire when the

// URL (i.e. route) changes.

// Don't use `router.asPath` because that contains the query string

// which we handle in the other useEffect above.

asPathRoot,

])

// This is exclusively for local development.

// If you're in local development, you have the <ClientSideRefresh>

// causing a XHR refresh of the content triggered by the Page Visibility

// API (implemented in the uswSWR hook). That means that on the pages that

// contain these `.ghd-tool` classes, any DOM changes we might

// have previously made are lost and started over.

useEffect(() => {

let mounted = true

const toggleVisibility = () => {

if (document.visibilityState === 'visible') {

// We don't need to track this timer, and possibly cancel it on

// dismount, because within the callback we use the `mounted`

// boolean which means we can know to do nothing if the parent

// component has been dismounted.

// The reason this is wrapped in a short timeout is because the

// React rendering might not actually have fully updated the DOM

// (from the XHR HTML it receives) so allow the DOM to refresh

// first before asking it to change. The number can be quite low

// (which is sufficient for human eyes) but must be at least

// in the lower hundreds of milliseconds.

setTimeout(() => {

if (mounted) {

onValue(currentValue)

}

}, 100)

}

}

if (process.env.NODE_ENV === 'development') {

document.addEventListener('visibilitychange', toggleVisibility)

}

return () => {

mounted = false

if (process.env.NODE_ENV === 'development') {

document.removeEventListener('visibilitychange', toggleVisibility)

}

}

}, [currentValue])

function onClickChoice(value: string) {

focusAfterNavRef.current = true

const params = new URLSearchParams(asPathQuery)

params.set(queryStringKey, value)

const newPath = `/${locale}${asPathRoot}?${params}`

router.push(newPath, undefined, { shallow: true, locale })

sendEvent({

type: EventType.preference,

preference_name: preferenceName,

preference_value: value,

})

Cookies.set(cookieKey, value)

}

// After a user clicks a tab, the shallow route change updates `currentValue`.

// Once the DOM reflects the new selection (aria-current="page" is on the new

// tab), move keyboard focus there so the user's context is preserved.

// WCAG 2.4.3 Focus Order — focus must land on the triggered control.

useEffect(() => {

if (!focusAfterNavRef.current || !currentValue) return

focusAfterNavRef.current = false

const container = document.querySelector<HTMLElement>(

`[data-testid="${queryStringKey}-picker"]`,

)

const selectedTab = container?.querySelector<HTMLElement>('[aria-current="page"]')

selectedTab?.focus()

}, [currentValue, queryStringKey])

const sharedContainerProps = {

'aria-label': ariaLabel,

}

const params = new URLSearchParams(asPathQuery)

return (

<div data-testid={`${queryStringKey}-picker`} className={styles.container}>

{/* The key attribute is required for a bug in UnderlineNav that doesn't render the component when there are changes to the items. */}

<UnderlineNav key={router.asPath} {...sharedContainerProps}>

{options.map((option) => {

params.set(queryStringKey, option.value)

const linkProps = {

[`data-${queryStringKey}`]: option.value,

}

return (

<UnderlineNav.Item

href={`?${params}`}

key={option.value}

aria-current={option.value === currentValue ? 'page' : undefined}

onSelect={(event: React.MouseEvent | React.KeyboardEvent) => {

event.preventDefault()

onClickChoice(option.value)

}}

{...linkProps}

>

{option.label}

</UnderlineNav.Item>

)

})}

</UnderlineNav>

</div>

)

}