import { ColorSchemeName } from '@preply/ds-core';
import { useSetTheme, useTheme, useThemes } from '@preply/ds-web-core';
import { LayoutFlex } from '@preply/ds-web-lib';
import React, { FC, useCallback, useEffect, useMemo } from 'react';

import { useTokenSearchContext } from '../providers/useTokenSearchContext';

import { SchemeSwitcher } from './SchemeSwitcher';
import { SearchTerms } from './SearchTerms';
import {
    SearchForm,
    SearchFormContent,
    SearchInput,
    TokenSearchStatic,
} from './TokenSearch.styles';

export const TokenSearch: FC = () => {
    const { theme } = useTheme();
    const { themes } = useThemes();
    const { setTheme } = useSetTheme();
    const { colorScheme, terms, setColorScheme, setSearchTerms } = useTokenSearchContext();

    const url = useMemo(() => new URL(window.top?.location.href || ''), []);
    const params = url.searchParams;
    const urlTheme = params.get('theme');
    const newTheme = urlTheme && themes?.find(t => t.name === urlTheme);
    const urlColorScheme = params.get('colorScheme');
    const urlTerms = params.get('terms');

    useEffect(() => {
        if (urlTheme) {
            if (urlTheme !== theme.name && setTheme && newTheme) {
                setTheme(newTheme);
            }
            if (urlTheme && urlColorScheme !== colorScheme) {
                setColorScheme(urlColorScheme as ColorSchemeName);
            }
            setSearchTerms(urlTerms || '');
        }

        params.delete('theme');
        params.delete('colorScheme');
        params.delete('terms');
        window.top?.history.replaceState({}, '', url);
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

    const handleSearchTermsChange = useCallback(
        (value: string) => setSearchTerms(value),
        [setSearchTerms],
    );

    return (
        <TokenSearchStatic>
            <SearchForm>
                <SearchFormContent>
                    <LayoutFlex gap="16" direction="column">
                        <LayoutFlex justifyContent="space-between" alignItems="start">
                            <h1 id="tokens" className="sbdocs sbdocs-h1 css-1j28tt">
                                Token Explorer
                            </h1>
                        </LayoutFlex>
                        <LayoutFlex gap="8" nowrap>
                            <SearchInput
                                terms={terms}
                                type="text"
                                placeholder="examples: teal, 300, action, primary, xs, --4adef, #00, 12px"
                                onChange={ev => handleSearchTermsChange(ev.target.value)}
                                value={terms}
                            />
                            <SchemeSwitcher />
                        </LayoutFlex>
                        <SearchTerms />
                    </LayoutFlex>
                </SearchFormContent>
            </SearchForm>
        </TokenSearchStatic>
    );
};
