import { useMemo, useState, ReactNode } from "react";
import { useQuery } from "@tanstack/react-query";
import { useNavigate } from "@tanstack/react-router";
import { Skeleton, Alert, Table, NavLink, TextInput, Group, Text, UnstyledButton, Center } from "@mantine/core";
import { IconAlertCircle, IconChevronDown, IconChevronUp, IconSelector } from "@tabler/icons-react";
import { useReactTable, getCoreRowModel, flexRender, getFilteredRowModel, FilterFn, Row, ColumnDef, getSortedRowModel, SortingState, Column } from "@tanstack/react-table";
import classNames from "classnames";

import { headerHeight } from "./config";
import { fetchTitlesInUniverse } from "./model";
import BadgeUniverse from "./BadgeUniverse";
import BadgeSeries from "./BadgeSeries";
import BadgeFormat from "./BadgeFormat";
import classes from "./ListTitle.module.css";
import { handleSearch } from "./utils";
import PickerFormat from "./PickerFormat";
import PickerUniverse from "./PickerUniverse";

type DataRow = {
	id: number;
	name: string;
	series?: { id: number, name: string, no: string };
	subformat_id: number;
	extra_universe_ids: number[];
};

const nameSearch: FilterFn<DataRow> = (row: Row<DataRow>, columnId: string, filterValue: string) => handleSearch(filterValue, row.getValue(columnId));
const seriesSearch: FilterFn<DataRow> = (row: Row<DataRow>, columnId: string, filterValue: string) => {
	const { name, no } = row.getValue(columnId) as { name?: string; no?: string; } ?? { name: "", no: "" };
	return handleSearch(filterValue, `${name ?? ""} ${no ?? ""}`);
};
const listSearch: FilterFn<DataRow> = (row: Row<DataRow>, columnId: string, filterValue: number[]) => filterValue.includes(row.getValue(columnId));
const listMultiSearch: FilterFn<DataRow> = (row: Row<DataRow>, columnId: string, filterValue: number[]) => (
	(row.getValue(columnId) as number[]).length === 0
	? [ 0 ]
	: (row.getValue(columnId) as number[])
)
	.some(subformat_id => filterValue.includes(subformat_id ?? 0));

const TextInputSearch = ({ value, setValue, label }: { value: string; setValue: (text: string) => void; label: string }) => (
	<TextInput
		classNames={{ root: classes.smallinlineinput, input: classes.thininputbox, label: classes.bold }}
		label={label}
		value={value}
		onChange={({ currentTarget }) => { setValue(currentTarget.value); }}
	/>
);

const SortButtonWrapper = ({ column, children }: { column: Column<DataRow, any>; children: ReactNode; }) => {
	const Icon = column.getCanSort() ? column.getNextSortingOrder() === "asc" ? IconSelector : column.getNextSortingOrder() === "desc" ? IconChevronDown : IconChevronUp : null;
	return (
		<Group justify="space-between" wrap="nowrap" align="center">
			{children}
			<UnstyledButton onClick={column.getToggleSortingHandler()}>
				<Center className={classes.icon}>
				{Icon && <Icon size={16} stroke={1.5} />}
				</Center>
			</UnstyledButton>
		</Group>
	);
};

export default ({ id }: { id: number }) => {
 	const { isPending, isError, isSuccess, data, error } = useQuery({
 	   	queryKey: [ "titles-list", id ],
	    queryFn: () => fetchTitlesInUniverse(id)
  	});
	const navigate = useNavigate();
	const [ sorting, setSorting ] = useState<SortingState>([]);
	const columns = useMemo(() => [
		{
			accessorKey: "subformat_id",
			id: "subformat_id",
			cell: ({ getValue }) => <BadgeFormat id={getValue() as number} />,
			header: ({ column }) => (
				<SortButtonWrapper column={column}>
					<PickerFormat onChange={formats => { column.setFilterValue(formats); }} />
				</SortButtonWrapper>
			),
			filterFn: "listSearch" as unknown as FilterFn<DataRow>
		},
		{
			accessorKey: "name",
			id: "name",
			cell: ({ getValue, row: { original: { id } } }) => (
				<NavLink
					label={getValue() as string}
					onClick={() => { navigate({ to: "/title/$id", params: { id } }); }}
					className={classes.navlink}
				/>),
			header: ({ column }) => (
				<SortButtonWrapper column={column}>
					<TextInputSearch value={(column.getFilterValue() ?? "") as string} setValue={column.setFilterValue} label="Name" />
				</SortButtonWrapper>
			),
			filterFn: "nameSearch" as unknown as FilterFn<DataRow>
		},
		{
			accessorKey: "series",
			id: "series",
			cell: ({ getValue }) => {
				const { id, name, no } = getValue() as { id?: number; name?: string; no?: string; } ?? { id: 0, name: "", no: "" };
				if (!id)
					return null;
				return (
					<BadgeSeries id={id} name={name ?? ""} no={no ?? ""} />
				);
			},
			header: ({ column }) => (
				<SortButtonWrapper column={column}>
					<TextInputSearch value={(column.getFilterValue() ?? "") as string} setValue={column.setFilterValue} label="Series" />
				</SortButtonWrapper>
			),
			filterFn: "seriesSearch" as unknown as FilterFn<DataRow>
		},
		{
			accessorKey: "extra_universe_ids",
			id: "extra_universe_ids",
			cell: ({ getValue }) => (getValue() as number[]).map(id => <BadgeUniverse key={id} id={id} clickable label size="md" />),
			header: ({ column }) => (
				<SortButtonWrapper column={column}>
					<Text size="sm" fw="bold">Crossovers</Text>
					<PickerUniverse
						limitOptions={[ ...(data ?? [])
							.map(({ extra_universe_ids }: { extra_universe_ids: number[] }) => extra_universe_ids)
							.flat()
							.filter((e: number, i: number, a: number[]) => a.indexOf(e) === i), 0 ]
						}
						onChange={formats => { column.setFilterValue(formats); }}
					/>
				</SortButtonWrapper>
			),
			filterFn: "listMultiSearch" as unknown as FilterFn<DataRow>
		}
	] as ColumnDef<DataRow>[], [ data ]);
	const table = useReactTable({
		columns,
		data,
		getCoreRowModel: getCoreRowModel(),
		getFilteredRowModel: getFilteredRowModel(),
		getSortedRowModel: getSortedRowModel(),
		onSortingChange: setSorting,
		filterFns: {
			nameSearch,
			seriesSearch,
			listSearch,
			listMultiSearch
		},
		state: {
			sorting
		},
		debugAll: true
	});
	if (isError)
		return (
			<Alert variant="light" color="red" title="Error" radius="sm" icon={<IconAlertCircle />}>
				{error.message}
	  		</Alert>
		);
	return (
		<Skeleton visible={isPending}>
			<Table layout="auto" miw="75%" highlightOnHover striped stickyHeader stickyHeaderOffset={headerHeight} className={classes.table}>
				<Table.Thead>
					{table.getHeaderGroups().map(headerGroup => (
						<Table.Tr key={headerGroup.id}>
							{headerGroup.headers.map(header => {/*console.log(header.column);*/return (
								<Table.Th key={header.id}>
									{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
								</Table.Th>
							);})}
						</Table.Tr>
					))}
				</Table.Thead>
				<Table.Tbody>
					{isSuccess && table?.getRowModel()?.rows?.map(row => (
    			        <Table.Tr key={row.id}>
              				{row.getVisibleCells().map(cell => (
                				<Table.Td
									key={cell.id}
									className={classNames({
										[classes.fitcontent]: cell.column.id === "subformat_id",
										[classes.flexgap]: cell.column.id === "extra_universe_ids" }
									)}
								>
                  					{flexRender(cell.column.columnDef.cell, cell.getContext())}
                				</Table.Td>
              				))}
            			</Table.Tr>
		          	))}
				</Table.Tbody>
			</Table>
		</Skeleton>
	);
};