import { __ } from '@wordpress/i18n'
import React, { useEffect, useMemo, useState } from 'react'
import classnames from 'classnames'
import { getSnippetType, isSnippetActive } from '../../../utils/snippets/snippets'
import { buildUrl } from '../../../utils/urls'
import { ListTable } from '../../common/ListTable'
import { SnippetViewToggle } from '../../common/SnippetViewToggle'
import { SnippetsCardGrid } from './SnippetsCardGrid'
import { SnippetsTableNavigation, SnippetsTableToolbar } from './SnippetsTableControls'
import { SearchResultsIndicator } from './SnippetsTableSearch'
import { getTableColumns } from './TableColumns'
import { useFilteredSnippets } from './WithFilteredSnippetsContext'
import { INDEX_STATUS, useSnippetsFilters } from './WithSnippetsTableFilters'
import { BULK_ACTIONS, TRASHED_BULK_ACTIONS, useApplyBulkAction } from './useApplyBulkAction'
import type { ListTableAction, ListTableSortDirection } from '../../common/ListTable'
import type { SnippetsTableAction } from './useApplyBulkAction'
import type { Snippet } from '../../../types/Snippet'
import type { SnippetView } from '../../../types/SnippetView'
import type { ReactNode } from 'react'

interface ManageTableSettings {
	hiddenColumns: Set<string>
	truncateRowValues: boolean
}

const useManageTableSettings = (): ManageTableSettings => {
	const [hiddenColumns, setHiddenColumns] = useState(
		() => new Set(window.CODE_SNIPPETS_MANAGE?.hiddenColumns ?? [])
	)
	const [truncateRowValues, setTruncateRowValues] = useState(
		() => 0 !== Number(window.CODE_SNIPPETS_MANAGE?.truncateRowValues ?? 1)
	)

	useEffect(() => {
		const screenOptions = document.getElementById('adv-settings')

		if (!screenOptions) {
			return
		}

		const updateHiddenColumns = () => {
			setHiddenColumns(
				new Set(Array.from(screenOptions.querySelectorAll<HTMLInputElement>(
					'.hide-column-tog:not(:checked)'
				))
					.map(toggle => toggle.value))
			)

			setTruncateRowValues(
				screenOptions.querySelector<HTMLInputElement>(
					'#snippets-table-truncate-row-values'
				)?.checked ?? true
			)
		}

		updateHiddenColumns()
		screenOptions.addEventListener('change', updateHiddenColumns)

		return () => {
			screenOptions.removeEventListener('change', updateHiddenColumns)
		}
	}, [])

	return { hiddenColumns, truncateRowValues }
}

const NoItemsMessage = () => {
	const { currentType, currentTag, searchQuery } = useSnippetsFilters()
	const emptyMessage = currentType
		? __("You don't have snippets of this type yet.", 'code-snippets')
		: __("You don't have any snippets yet.", 'code-snippets')

	return searchQuery || currentTag
		? <>
			{__('No snippets were found matching the current search query.', 'code-snippets')}
			{__(' Please enter a new query or use the "Clear Filters" button above.', 'code-snippets')}
		</>
		: <>
			{emptyMessage}{' '}
			<a href={buildUrl(window.CODE_SNIPPETS?.urls.addNew, { type: currentType })}>
				{__('Add a new snippet.', 'code-snippets')}
			</a>
		</>
}

const getRowClassName = (
	snippet: Snippet,
	activeByCondition: Map<Snippet['id'], Snippet[]>
): string =>
	classnames(
		'snippet',
		`snippet ${isSnippetActive(snippet, activeByCondition) ? 'active' : 'inactive'}-snippet`,
		`${getSnippetType(snippet)}-snippet`,
		`${snippet.scope}-snippet`,
		{
			'trashed-snippet': snippet.trashed
		}
	)

interface SnippetsViewProps {
	snippetView: SnippetView
	setSnippetView: (view: SnippetView) => void
	snippets: Snippet[]
	actions: ListTableAction<SnippetsTableAction>[]
	doAction: (action: SnippetsTableAction | undefined, selected: Set<Snippet['id']>) => Promise<void>
	extraTableNav: (which: 'top' | 'bottom') => ReactNode
	hiddenColumns: Set<string>
	truncateRowValues: boolean
}

const SnippetsView: React.FC<SnippetsViewProps> = ({
	snippetView,
	setSnippetView,
	snippets,
	actions,
	doAction,
	extraTableNav,
	hiddenColumns,
	truncateRowValues
}) => {
	const { activeByCondition } = useFilteredSnippets()
	const columns = useMemo(() => getTableColumns(hiddenColumns), [hiddenColumns])
	const itemsPerPage = window.CODE_SNIPPETS_MANAGE?.snippetsPerPage
	const pageCount = itemsPerPage && Math.ceil(snippets.length / itemsPerPage)
	const endTableNav = (which: 'top' | 'bottom') =>
		'top' === which
			? <SnippetViewToggle snippetView={snippetView} setSnippetView={setSnippetView} />
			: null

	return 'card' === snippetView
		? <SnippetsCardGrid
			snippets={snippets}
			actions={actions}
			doAction={doAction}
			itemsPerPage={itemsPerPage}
			extraTableNav={extraTableNav}
			endTableNav={endTableNav}
			noItems={<NoItemsMessage />}
			beforeGrid={<SearchResultsIndicator />}
		/>
		: <ListTable
			items={snippets}
			getKey={snippet => snippet.id}
			initialSort={getInitialSort()}
			className={classnames({ 'truncate-row-values': truncateRowValues })}
			columns={columns}
			actions={actions}
			doAction={doAction}
			totalPages={pageCount}
			extraTableNav={extraTableNav}
			selectAllControl
			endTableNav={endTableNav}
			rowClassName={snippet => getRowClassName(snippet, activeByCondition)}
			noItems={<NoItemsMessage />}
			beforeTable={<SearchResultsIndicator />}
		/>
}

/**
 * The "Snippets List Order" setting names a default ordering for the table,
 * which sorting is now expressed through columns. Map one to the other so the
 * setting still decides how the list opens; clicking a heading overrides it for
 * the rest of the visit, as it does for any other starting order.
 */
const LIST_ORDER_SORTS: Record<string, { columnId: string, direction: ListTableSortDirection }> = {
	'priority-asc': { columnId: 'priority', direction: 'asc' },
	'name-asc': { columnId: 'name', direction: 'asc' },
	'name-desc': { columnId: 'name', direction: 'desc' },
	'modified-desc': { columnId: 'date', direction: 'desc' },
	'modified-asc': { columnId: 'date', direction: 'asc' }
}

const getInitialSort = () =>
	LIST_ORDER_SORTS[window.CODE_SNIPPETS_MANAGE?.listOrder ?? ''] ?? undefined

export interface SnippetsListTableProps {
	snippetView: SnippetView
	setSnippetView: (view: SnippetView) => void
}

export const SnippetsListTable: React.FC<SnippetsListTableProps> = ({
	snippetView,
	setSnippetView
}) => {
	const { snippetsByStatus } = useFilteredSnippets()
	const { currentStatus, setCurrentStatus } = useSnippetsFilters()
	const { hiddenColumns, truncateRowValues } = useManageTableSettings()

	const currentSnippets = useMemo(
		() => snippetsByStatus.get(currentStatus) ?? [],
		[snippetsByStatus, currentStatus]
	)
	const applyBulkAction = useApplyBulkAction(currentSnippets)

	useEffect(() => {
		if (INDEX_STATUS !== currentStatus && !snippetsByStatus.has(currentStatus)) {
			setCurrentStatus(INDEX_STATUS)
		}
	}, [currentStatus, setCurrentStatus, snippetsByStatus])

	const extraTableNav = (which: 'top' | 'bottom') =>
		<SnippetsTableNavigation which={which} visibleSnippets={snippetsByStatus.get('all') ?? []} />

	return (
		<>
			<SnippetsTableToolbar />

			<div className="snippets-list-view">
				<SnippetsView
					snippetView={snippetView}
					setSnippetView={setSnippetView}
					snippets={currentSnippets}
					actions={'trashed' === currentStatus ? TRASHED_BULK_ACTIONS : BULK_ACTIONS}
					doAction={applyBulkAction}
					extraTableNav={extraTableNav}
					hiddenColumns={hiddenColumns}
					truncateRowValues={truncateRowValues}
				/>
			</div>
		</>
	)
}