import React, { startTransition } from 'react';
import {
    Divider,
    DropdownMenu,
    DropdownMenuCheckboxItem,
    DropdownMenuItem,
    DropdownMenuSelect,
    DropdownMenuSelectOption,
    DropdownSubmenu,
    Icon,
    IconButton,
} from '@preply/ds-web-lib';
import TokyoUIFilter from '@preply/ds-media-icons/dist/24/TokyoUIFilter.svg';
import TokyoUIFullscreenExpand from '@preply/ds-media-icons/dist/24/TokyoUIFullscreenExpand.svg';
import TokyoUIFullscreenCollapse from '@preply/ds-media-icons/dist/24/TokyoUIFullscreenCollapse.svg';
import TokyoUIReset from '@preply/ds-media-icons/dist/24/TokyoUIReset.svg';
import TokyoUITranslateVocab from '@preply/ds-media-icons/dist/24/TokyoUITranslateVocab.svg';
import TokyoUITextBold from '@preply/ds-media-icons/dist/24/TokyoUITextBold.svg';
import TokyoUIExerciseClosedGapsJumble from '@preply/ds-media-icons/dist/24/TokyoUIExerciseClosedGapsJumble.svg';
import { useFontsExplorerState } from './FontsExplorerProvider';
import { languagesData } from './data';
import { UnicodeTableDialog } from './UnicodeTableDialog';

export function Filters() {
    const [state, dispatch] = useFontsExplorerState();

    return (
        <DropdownMenu
            keepMounted
            trigger={
                <IconButton
                    svg={TokyoUIFilter}
                    assistiveText="Filters"
                    variant="tertiary"
                    size="medium"
                />
            }
        >
            <DropdownSubmenu
                label="Languages"
                side="left"
                leadingElement={<Icon svg={TokyoUITranslateVocab} size="24" />}
            >
                {languagesData.map(lang => (
                    <DropdownMenuCheckboxItem
                        key={lang.code}
                        label={lang.name}
                        checked={state.visible.includes(lang.code)}
                        onCheckedChange={() => {
                            startTransition(() =>
                                dispatch({ type: 'toggle-visibility', lang: lang.code }),
                            );
                        }}
                    />
                ))}
            </DropdownSubmenu>
            <Divider />
            <DropdownMenuSelect
                label="Text transform"
                side="left"
                leadingElement={<Icon svg={TokyoUITextBold} size="24" />}
                defaultValue={state.textTransform}
                onValueChange={value => {
                    startTransition(() =>
                        dispatch({
                            type: 'set-text-transform',
                            textTransform: value as 'normal' | 'uppercase' | 'lowercase',
                        }),
                    );
                }}
            >
                <DropdownMenuSelectOption value="normal" label="Normal" />
                <DropdownMenuSelectOption value="uppercase" label="Uppercase" />
                <DropdownMenuSelectOption value="lowercase" label="Lowercase" />
            </DropdownMenuSelect>
            <Divider />
            <DropdownSubmenu
                label="Unicode tables"
                side="left"
                leadingElement={<Icon svg={TokyoUIExerciseClosedGapsJumble} size="24" />}
                keepMounted
            >
                <UnicodeTableDialog fontFamily="Platform">
                    <DropdownMenuItem label="Platform" />
                </UnicodeTableDialog>
                <UnicodeTableDialog fontFamily="Figtree">
                    <DropdownMenuItem label="Figtree" />
                </UnicodeTableDialog>
                <UnicodeTableDialog fontFamily="Noto Sans">
                    <DropdownMenuItem label="Noto Sans" />
                </UnicodeTableDialog>
            </DropdownSubmenu>
            <DropdownMenuItem
                leadingElement={<Icon svg={TokyoUIFullscreenExpand} size="24" />}
                label="Expand all"
                onClick={() => {
                    startTransition(() => dispatch({ type: 'expand-all' }));
                }}
            />
            <DropdownMenuItem
                leadingElement={<Icon svg={TokyoUIFullscreenCollapse} size="24" />}
                label="Collapse all"
                onClick={() => {
                    startTransition(() => dispatch({ type: 'collapse-all' }));
                }}
            />
            <DropdownMenuItem
                leadingElement={<Icon svg={TokyoUIReset} size="24" />}
                label="Reset"
                onClick={() => {
                    startTransition(() => dispatch({ type: 'reset' }));
                }}
            />
        </DropdownMenu>
    );
}
