import { __, _x, sprintf } from '@wordpress/i18n'
import React, { Fragment, useId, useMemo } from 'react'
import { useRestAPI } from '../../../hooks/useRestAPI'
import { useSnippetsList } from '../../../hooks/useSnippetsList'
import { handleUnknownError } from '../../../utils/errors'
import { REST_BASES } from '../../../utils/restAPI'
import { buildUrl } from '../../../utils/urls'
import { SubmitButton } from '../../common/SubmitButton'
import { SearchArea } from './SnippetsTableSearch'
import { useFilteredSnippets } from './WithFilteredSnippetsContext'
import { INDEX_STATUS, useSnippetsFilters } from './WithSnippetsTableFilters'
import type { Snippet } from '../../../types/Snippet'
import type { SnippetStatus } from './WithSnippetsTableFilters'
const STATUS_LABELS: [SnippetStatus, string][] = [
['all', __('All', 'code-snippets')],
['active', __('Active', 'code-snippets')],
['inactive', __('Inactive', 'code-snippets')],
['recently_active', __('Recently Active', 'code-snippets')],
['locked', __('Locked', 'code-snippets')],
['unlocked', __('Unlocked', 'code-snippets')],
['trashed', __('Trashed', 'code-snippets')]
]
const SnippetStatusCounts = () => {
const { currentStatus, setCurrentStatus } = useSnippetsFilters()
const { snippetsByStatus } = useFilteredSnippets()
const visibleStatuses = STATUS_LABELS.filter(([status]) =>
snippetsByStatus.has(status) && ('unlocked' !== status || snippetsByStatus.has('locked')))
return (
<ul className="subsubsub">
{visibleStatuses.map(([status, label]) =>
<Fragment key={status}>
<li className={status}>
<a
href={buildUrl(window.location.href, {
status: INDEX_STATUS === status ? undefined : status
})}
className={currentStatus === status ? 'current' : undefined}
aria-current={currentStatus === status ? 'page' : undefined}
onClick={event => {
event.preventDefault()
setCurrentStatus(status)
}}
>
{label} <span className="count">{
// translators: %d: number of snippets in the current view.
sprintf(_x('(%d)', 'table view count', 'code-snippets'), snippetsByStatus.get(status)?.length ?? 0)
}</span>
</a>
</li>
</Fragment>)}
</ul>
)
}
const ClearRecentlyActiveButton: React.FC = () => {
const { api } = useRestAPI()
const { refreshSnippetsList } = useSnippetsList()
const { currentStatus } = useSnippetsFilters()
return 'recently_active' === currentStatus
? <div className="alignleft actions">
<SubmitButton
secondary
name="clear-recent-list"
text={__('Clear List', 'code-snippets')}
onClick={event => {
event.preventDefault()
api.del(REST_BASES.recentlyActive)
.then(refreshSnippetsList)
.catch(handleUnknownError)
}}
/>
</div>
: null
}
interface FilterByTagControlProps {
visibleSnippets: Snippet[]
}
const FilterByTagControl: React.FC<FilterByTagControlProps> = ({ visibleSnippets }) => {
const { currentTag, setCurrentTag } = useSnippetsFilters()
const tagFilterId = useId()
const tagsList: Set<string> = useMemo(
() => visibleSnippets.reduce((tags, snippet) => {
snippet.tags.forEach(tag => tags.add(tag))
return tags
}, new Set<string>()),
[visibleSnippets])
return 0 < tagsList.size
? <div className="alignleft actions">
<label htmlFor={tagFilterId} className="screen-reader-text">
{__('Filter snippets by tag', 'code-snippets')}
</label>
<select
id={tagFilterId}
name="tag"
value={currentTag}
aria-label={__('Filter snippets by tag', 'code-snippets')}
onChange={event => setCurrentTag(event.target.value)}
>
<option value="">{__('All Tags', 'code-snippets')}</option>
{[...tagsList].map(tag =>
<option key={tag} value={tag}>{tag}</option>)}
</select>
</div>
: null
}
export interface SnippetsTableNavigationProps {
which: 'top' | 'bottom'
visibleSnippets: Snippet[]
}
export const SnippetsTableNavigation: React.FC<SnippetsTableNavigationProps> = ({
which,
visibleSnippets
}) =>
<>
{'top' === which && <FilterByTagControl visibleSnippets={visibleSnippets} />}
<ClearRecentlyActiveButton />
{'top' === which && <SearchArea />}
</>
export const SnippetsTableToolbar = () =>
<div className="snippets-table-toolbar">
<SnippetStatusCounts />
</div>