/* eslint-disable prefer-arrow-callback */
import * as React from 'react';
import {
    Group,
    useComputedColorScheme,
    ActionIcon,
} from '@mantine/core';
import { useSearchParams } from 'react-router';
import { useLocalStorage, useMediaQuery } from '@mantine/hooks';
import { useEffect, useState } from 'react';
import { IconAdjustments, IconFilter } from '@tabler/icons-react';
import RefreshActionIcon from '@index/components/Tests/Table/RefreshActionIcon';
import useInfinityScroll from '@shared/hooks/useInfinityScroll';
import TestsTable from '@index/components/Tests/Table/TestsTable';
import Settings from '@index/components/Tests/Table/Settings';
import Filter from '@index/components/Tests/Table/Filter';
import { useNavProgressFetchEffect } from '@shared/hooks';
import { useParams } from '@hooks/useParams';

interface Props {
    updateToolbar: any
    navbarWidth: number
}

export default function Tests({ updateToolbar, navbarWidth }: Props) {
    const { query } = useParams();

    const colorScheme = useComputedColorScheme();
    // useIndexSubpageEffect('By Runs');

    const [searchParams, setSearchParams] = useSearchParams();
    const [sortOpen, setSortOpen] = useState(false);
    const [isFilterDrawerOpen, setIsFilterDrawerOpen] = useState(false);
    const isMobile = useMediaQuery('(max-width: 500px)');
    const baseFilter = query.base_filter ? query.base_filter : {};
    if (query.app) baseFilter.app = { $oid: query?.app || '' };

    const { firstPageQuery, infinityQuery, newestItemsQuery, refresh } = useInfinityScroll({
        baseFilterObj: baseFilter,
        filterObj: { ...query.filter, ...query.quick_filter },
        resourceName: 'tests',
        newestItemsFilterKey: 'startDate',
        newestItemsEnabled: query.modalIsOpen !== 'true',
        sortBy: query.sortBy || '',
    });
    useNavProgressFetchEffect(infinityQuery.isFetching);

    const [visibleFields, setVisibleFields] = useLocalStorage(
        {
            key: 'visibleFields',
            defaultValue: [
                '_id',
                'name',
                'status',
                'creatorUsername',
                'markedAs',
                'startDate',
                'browserName',
                'os',
                'viewport',
            ],
        },
    );

    useEffect(
        function addToolbarSortAndSettingsIcons() {
            updateToolbar(
                <ActionIcon
                    title="Table settings, sorting, and columns visibility"
                    aria-label="Table settings, sorting, and columns visibility"
                    color={colorScheme === 'dark' ? 'green.8' : 'green.6'}
                    data-test="table-sorting"
                    variant={sortOpen ? 'light' : 'transparent'}
                    style={{
                        backgroundColor: sortOpen
                            ? colorScheme === 'dark'
                                ? 'rgba(47, 158, 68, 0.18)'
                                : '#ebfbee'
                            : 'transparent',
                    }}
                    onClick={() => {
                        setIsFilterDrawerOpen(false);
                        setSortOpen((prev) => !prev);
                    }}
                >
                    <IconAdjustments stroke={1} size={24} />
                </ActionIcon>,
                48,
            );

            updateToolbar(
                <ActionIcon
                    title="Filter the Table Data"
                    aria-label="Filter the Table Data"
                    color={colorScheme === 'dark' ? 'green.8' : 'green.6'}
                    data-test="table-filtering"
                    variant={isFilterDrawerOpen ? 'light' : 'transparent'}
                    style={{
                        backgroundColor: isFilterDrawerOpen
                            ? colorScheme === 'dark'
                                ? 'rgba(47, 158, 68, 0.18)'
                                : '#ebfbee'
                            : 'transparent',
                    }}
                    onClick={() => {
                        setSortOpen(false);
                        setIsFilterDrawerOpen((prev) => !prev);
                    }}
                >
                    <IconFilter size={24} stroke={1} />
                </ActionIcon>,
                47,
            );
        },
        [sortOpen, isFilterDrawerOpen, colorScheme],
    );

    useEffect(
        function updateRefreshIcon() {
            updateToolbar(
                <RefreshActionIcon
                    key="reload"
                    newestItemsQuery={newestItemsQuery}
                    firstPageQuery={firstPageQuery}
                    infinityQuery={infinityQuery}
                    refresh={refresh}
                />,
                52,
            );
        },
        [
            newestItemsQuery?.data?.results.length,
            newestItemsQuery.status,
            colorScheme,
        ],
    );

    // When filters change, force firstPageQuery refetch to get new timestamp,
    // which cascades to infinityQuery via queryKey dependency.
    useEffect(
        function refetchData() {
            firstPageQuery.refetch();
        }, [
            // eslint-disable-next-line react-hooks/exhaustive-deps
            JSON.stringify(query.base_filter),
            // eslint-disable-next-line react-hooks/exhaustive-deps
            JSON.stringify(query.quick_filter),
            // eslint-disable-next-line react-hooks/exhaustive-deps
            JSON.stringify(query.filter),
            query.app,
            query.sortBy,
        ],
    );

    const filterWidth = isMobile ? '100%' : '420px';
    const settingsWidth = '300px';

    let tableWidth = '100%';
    if (isFilterDrawerOpen) {
        tableWidth = isMobile ? '0%' : `calc(100% - ${filterWidth})`;
    } else if (sortOpen) {
        tableWidth = `calc(100% - ${settingsWidth})`;
    }

    return (
        <Group
            align="start"
            wrap="nowrap"
            gap={0}
            style={{ width: '100%' }}
        >
            <TestsTable
                updateToolbar={updateToolbar}
                firstPageQuery={firstPageQuery}
                infinityQuery={infinityQuery}
                visibleFields={visibleFields}
                size={tableWidth}
                navbarWidth={navbarWidth}
            />

            <Settings
                open={sortOpen}
                setSortOpen={setSortOpen}
                visibleFields={visibleFields}
                setVisibleFields={setVisibleFields}
                searchParams={searchParams}
                setSearchParams={setSearchParams}
            />

            <Filter
                open={isFilterDrawerOpen}
                setOpen={setIsFilterDrawerOpen}
                searchParams={searchParams}
                setSearchParams={setSearchParams}
            />
        </Group>
    );
}