import { useId, useMemo, useState } from 'react'
import {
    Drawer,
    DrawerBody,
    DrawerContent,
    DrawerHeader,
    DrawerOverlay,
    DrawerPortal,
    DrawerTitle,
    DrawerTrigger,
} from '../../Drawer'
import Block from '../../Primitives/Block/Block'
import Text from '../../Text/Text'
import Button from '../../Button/Button'
import { ButtonSize, ButtonType } from '../../Button/types'
import { Checkbox } from '../../Checkbox'
import { CheckboxSize } from '../../Checkbox/types'
import { TextInput } from '../../Inputs/TextInput'
import { TextInputSize } from '../../Inputs/TextInput/types'
import InputFooter from '../../Inputs/utils/InputFooter/InputFooter'
import InputLabels from '../../Inputs/utils/InputLabels/InputLabels'
import { Skeleton, SkeletonVariant } from '../../Skeleton'
import VirtualList from '../../VirtualList/VirtualList'
import SelectItemV2 from '../../SelectV2/SelectItemV2'
import {
    hasExactMatch,
    getFilteredItemsWithCustomValue,
    hasRenderableSelectItems,
} from '../../Select/selectUtils'
import { setupAccessibility } from '../../SingleSelect/utils'
import { useBreakpoints } from '../../../hooks/useBreakPoints'
import { BREAKPOINTS } from '../../../breakpoints/breakPoints'
import { useResponsiveTokens } from '../../../hooks/useResponsiveTokens'
import type { MultiSelectV2TokensType } from '../multiSelectV2.tokens'
import {
    MultiSelectV2SelectionTagType,
    MultiSelectV2Size,
    MultiSelectV2Variant,
    type MultiSelectV2Props,
} from '../multiSelectV2.types'
import MultiSelectV2Trigger from '../MultiSelectV2Trigger'
import {
    filterMultiSelectV2MenuGroups,
    getAllAvailableValues,
    getSelectAllState,
    getMultiSelectV2ValueLabelMap,
} from '../utils'
import {
    flattenMobileMultiSelectV2Groups,
    isSelectableItem,
    toVirtualListItems,
    type FlattenedMobileMultiSelectV2Item,
} from './mobileMultiSelectV2.utils'
import {
    clampScopeToMaxSelections,
    emitLegacyScopeChanges,
    getNextSelectionAfterToggle,
    getNextSelectionForScope,
} from '../../shared/multiSelectSelection'
import { useSelectSearchController } from '../../Select/useSelectSearchController'
import SelectSearchStatus, {
    SELECT_SEARCH_STATUS_HEIGHT,
} from '../../Select/SelectSearchStatus'

const MobileMultiSelectV2 = ({
    selectedValues,
    onChange,
    onSelectionChange,
    items,
    label,
    subLabel,
    helpIconText,
    required = false,
    variant = MultiSelectV2Variant.CONTAINER,
    selectionTagType = MultiSelectV2SelectionTagType.COUNT,
    slot,
    hintText,
    placeholder,
    size = MultiSelectV2Size.MD,
    search,
    enableSelectAll = false,
    selectAllText = 'Select All',
    maxSelections,
    customTrigger,
    error = {},
    showActionButtons = true,
    primaryAction,
    secondaryAction,
    showItemDividers = false,
    showHeaderBorder = false,
    enableVirtualization = false,
    virtualListItemHeight = 56,
    virtualListOverscan = 5,
    onEndReached,
    endReachedThreshold,
    hasMore,
    skeleton = {
        count: 3,
        show: false,
        variant: 'pulse',
    },
    allowCustomValue = false,
    customValueLabel = 'Specify',
    onOpenChange,
    triggerDimensions,
    inline = false,
    disabled = false,
    name,
    ...buttonRest
}: MultiSelectV2Props) => {
    const safeItems = items ?? []
    const [open, setOpen] = useState(false)
    const multiSelectTokens =
        useResponsiveTokens<MultiSelectV2TokensType>('MULTI_SELECT_V2')
    const valueLabelMap = useMemo(
        () => getMultiSelectV2ValueLabelMap(safeItems),
        [safeItems]
    )
    const generatedId = useId()

    const { breakPointLabel } = useBreakpoints(BREAKPOINTS)
    const isSmallScreen = breakPointLabel === 'sm'
    const isContainer = variant === MultiSelectV2Variant.CONTAINER
    const searchPlaceholder = search?.placeholder ?? 'Search options...'
    const {
        value: searchText,
        isControlled: isSearchControlled,
        isSearchEnabled,
        shouldFilterInternally,
        valueForSearchBehavior,
        dispatchUserValue,
        resetUncontrolled,
    } = useSelectSearchController({
        controlledValue: search?.searchText,
        onValueChange: search?.onSearchChange,
        explicitShow: search?.show,
        existingSurfaceDefault: false,
    })
    const isActiveSearchLoading =
        isSearchEnabled && Boolean(search?.isSearchLoading)

    const { uniqueName, labelId, hintTextId, errorMessageId, ariaAttributes } =
        setupAccessibility({
            name,
            generatedId,
            label,
            hintText,
            error: error.show,
            errorMessage: error.message,
            rest: buttonRest,
            prefix: 'multiselectv2-mobile',
        })

    const hasMatch = useMemo(
        () => hasExactMatch(valueForSearchBehavior, safeItems),
        [valueForSearchBehavior, safeItems]
    )

    const filteredItems = useMemo(() => {
        const baseFilteredItems = shouldFilterInternally
            ? filterMultiSelectV2MenuGroups(safeItems, searchText)
            : safeItems
        return getFilteredItemsWithCustomValue(
            baseFilteredItems,
            searchText,
            hasMatch,
            allowCustomValue,
            isSearchEnabled && !search?.isSearchLoading,
            customValueLabel
        )
    }, [
        safeItems,
        searchText,
        hasMatch,
        allowCustomValue,
        isSearchEnabled,
        search?.isSearchLoading,
        shouldFilterInternally,
        customValueLabel,
    ])
    const hasSourceItems = isSearchControlled
        ? hasRenderableSelectItems(safeItems)
        : safeItems.length > 0
    const hasRenderableItems = isSearchControlled
        ? hasRenderableSelectItems(filteredItems)
        : filteredItems.length > 0
    const showEmptyState = isSearchControlled
        ? !hasRenderableItems
        : !hasSourceItems || (!hasRenderableItems && searchText.length > 0)
    const searchStatusHeight =
        isActiveSearchLoading && hasRenderableItems
            ? SELECT_SEARCH_STATUS_HEIGHT
            : 0

    const flattenedItems = useMemo(
        () => flattenMobileMultiSelectV2Groups(filteredItems, enableSelectAll),
        [filteredItems, enableSelectAll]
    )

    const selectAllItems = isSearchControlled ? safeItems : filteredItems
    const selectableValues = useMemo(
        () => getAllAvailableValues(selectAllItems),
        [selectAllItems]
    )
    const { allSelected, someSelected } = getSelectAllState(
        selectedValues,
        selectableValues
    )

    const handleOpenChange = (nextOpen: boolean) => {
        setOpen(nextOpen)
        if (!nextOpen && isSearchEnabled) {
            resetUncontrolled()
        }
        onOpenChange?.(nextOpen)
    }

    const handleSelect = (value: string) => {
        const selected = selectedValues.includes(value)
        const maxReached =
            maxSelections !== undefined &&
            selectedValues.length >= maxSelections &&
            !selected

        if (maxReached || !isSelectableItem(value, filteredItems)) {
            return
        }
        const nextSelection = getNextSelectionAfterToggle(selectedValues, value)
        onChange?.(value)
        onSelectionChange?.(nextSelection)
    }

    const getSelectAllScope = (selectAll: boolean) =>
        selectAll
            ? clampScopeToMaxSelections(
                  selectedValues,
                  selectableValues,
                  maxSelections
              )
            : selectableValues

    const handleLegacySelectAll = (
        selectAll: boolean,
        scopedValues: string[]
    ) => {
        emitLegacyScopeChanges(
            selectAll,
            scopedValues,
            selectedValues,
            onChange ? (newValue) => onChange(newValue) : undefined
        )
    }

    const handleSelectAllGesture = () => {
        const selectAll = !allSelected
        const scopedValues = getSelectAllScope(selectAll)
        const nextSelection = getNextSelectionForScope(
            selectedValues,
            scopedValues,
            selectAll
        )
        handleLegacySelectAll(selectAll, scopedValues)
        onSelectionChange?.(nextSelection)
    }

    const triggerAriaAttributes = {
        'aria-describedby': ariaAttributes['aria-describedby'] as
            | string
            | undefined,
        'aria-labelledby': ariaAttributes['aria-labelledby'] as
            | string
            | undefined,
        'aria-label': ariaAttributes['aria-label'] as string | undefined,
        'aria-invalid': ariaAttributes['aria-invalid'] as boolean | undefined,
    }

    const renderMenuItem = (flatItem: FlattenedMobileMultiSelectV2Item) => {
        if (flatItem.type === 'selectAll') {
            return (
                <Block
                    style={{
                        paddingTop: multiSelectTokens.menu.selectAll.paddingTop,
                        paddingRight:
                            multiSelectTokens.menu.selectAll.paddingRight,
                        paddingBottom:
                            multiSelectTokens.menu.selectAll.paddingBottom,
                        paddingLeft:
                            multiSelectTokens.menu.selectAll.paddingLeft,
                    }}
                    borderRadius={multiSelectTokens.menu.selectAll.borderRadius}
                    borderBottom={multiSelectTokens.menu.header.borderBottom}
                    backgroundColor={
                        multiSelectTokens.menu.header.backgroundColor
                    }
                >
                    <Block
                        display="flex"
                        alignItems="center"
                        justifyContent="space-between"
                        paddingLeft={
                            multiSelectTokens.menu.header
                                .selectAllRowPaddingLeft
                        }
                        paddingRight={
                            multiSelectTokens.menu.header
                                .selectAllRowPaddingRight
                        }
                        cursor="pointer"
                        onClick={handleSelectAllGesture}
                    >
                        <Text
                            variant="body.md"
                            fontSize={
                                multiSelectTokens.menu.item.option.fontSize
                            }
                            fontWeight={
                                multiSelectTokens.menu.item.option.fontWeight
                            }
                            color={
                                multiSelectTokens.menu.item.option.color.default
                            }
                        >
                            {selectAllText}
                        </Text>
                        <Checkbox
                            size={CheckboxSize.SMALL}
                            checked={
                                allSelected
                                    ? true
                                    : someSelected
                                      ? 'indeterminate'
                                      : false
                            }
                            onCheckedChange={(checked) => {
                                const selectAll =
                                    checked === true ||
                                    checked === 'indeterminate'
                                handleLegacySelectAll(
                                    selectAll,
                                    getSelectAllScope(selectAll)
                                )
                            }}
                        />
                    </Block>
                </Block>
            )
        }

        if (flatItem.type === 'label') {
            return (
                <Block
                    style={{
                        paddingTop:
                            multiSelectTokens.menu.item.optionsLabel.paddingTop,
                        paddingRight:
                            multiSelectTokens.menu.item.optionsLabel
                                .paddingRight,
                        paddingBottom:
                            multiSelectTokens.menu.item.optionsLabel
                                .paddingBottom,
                        paddingLeft:
                            multiSelectTokens.menu.item.optionsLabel
                                .paddingLeft,
                    }}
                >
                    <Text
                        variant="body.sm"
                        textTransform="uppercase"
                        fontSize={
                            multiSelectTokens.menu.item.optionsLabel.fontSize
                        }
                        fontWeight={
                            multiSelectTokens.menu.item.optionsLabel.fontWeight
                        }
                        color={
                            multiSelectTokens.menu.item.optionsLabel.color
                                .default
                        }
                    >
                        {flatItem.label}
                    </Text>
                </Block>
            )
        }

        if (flatItem.type === 'separator') {
            return (
                <Block
                    height={multiSelectTokens.menu.item.seperator.height}
                    backgroundColor={
                        multiSelectTokens.menu.item.seperator.color
                    }
                    margin={multiSelectTokens.menu.item.seperator.margin}
                />
            )
        }

        if (flatItem.type === 'item' && flatItem.item) {
            return (
                <SelectItemV2
                    mode="multi"
                    item={flatItem.item}
                    selectedValues={selectedValues}
                    onSelect={handleSelect}
                    itemTokens={multiSelectTokens.menu.item}
                    asMenuItem={false}
                    focusIdentityValue={
                        isSearchControlled ? flatItem.item.value : undefined
                    }
                />
            )
        }

        return null
    }

    return (
        <Block
            data-multi-select="multi-select"
            data-status={disabled ? 'disabled' : 'enabled'}
            width={triggerDimensions?.width}
            maxWidth={triggerDimensions?.maxWidth}
            minWidth={triggerDimensions?.minWidth}
            display="flex"
            flexDirection="column"
            gap={multiSelectTokens.gap}
        >
            {isContainer &&
                (!isSmallScreen || size !== MultiSelectV2Size.LG) && (
                    <InputLabels
                        label={label}
                        sublabel={subLabel}
                        helpIconHintText={helpIconText}
                        name={uniqueName}
                        required={required}
                        labelId={labelId}
                        tokens={multiSelectTokens}
                    />
                )}

            <Drawer open={open} onOpenChange={handleOpenChange}>
                <DrawerTrigger>
                    {customTrigger || (
                        <MultiSelectV2Trigger
                            selectedValues={selectedValues}
                            slot={slot}
                            variant={variant}
                            size={size}
                            isSmallScreen={isSmallScreen}
                            name={uniqueName}
                            label={label}
                            placeholder={placeholder}
                            required={required}
                            selectionTagType={selectionTagType}
                            valueLabelMap={valueLabelMap}
                            fallbackToValue={search?.searchText !== undefined}
                            open={open}
                            multiSelectTokens={multiSelectTokens}
                            inline={inline}
                            error={error.show}
                            disabled={disabled}
                            triggerDimensions={
                                isSmallScreen
                                    ? { ...triggerDimensions, width: '100%' }
                                    : triggerDimensions
                            }
                            borderRadius={String(
                                multiSelectTokens.trigger.borderRadius[size][
                                    variant
                                ]
                            )}
                            {...triggerAriaAttributes}
                            {...buttonRest}
                        />
                    )}
                </DrawerTrigger>

                <DrawerPortal>
                    <DrawerOverlay />
                    <DrawerContent contentDriven={true}>
                        <DrawerHeader>
                            <Block
                                display="flex"
                                justifyContent="center"
                                alignItems="center"
                                style={{
                                    paddingTop:
                                        multiSelectTokens.drawer.header
                                            .paddingTop,
                                    paddingRight:
                                        multiSelectTokens.drawer.header
                                            .paddingRight,
                                    paddingBottom:
                                        multiSelectTokens.drawer.header
                                            .paddingBottom,
                                    paddingLeft:
                                        multiSelectTokens.drawer.header
                                            .paddingLeft,
                                }}
                                {...(showHeaderBorder && {
                                    borderBottom:
                                        multiSelectTokens.drawer.header
                                            .borderBottom,
                                })}
                            >
                                <DrawerTitle>
                                    {label || 'Select options'}
                                </DrawerTitle>
                            </Block>
                        </DrawerHeader>

                        <DrawerBody noPadding={true}>
                            {skeleton.show ? (
                                <Block
                                    display="flex"
                                    flexDirection="column"
                                    gap={multiSelectTokens.menu.item.gap}
                                    style={{
                                        paddingTop:
                                            multiSelectTokens.menu.item
                                                .paddingTop,
                                        paddingRight:
                                            multiSelectTokens.menu.item
                                                .paddingRight,
                                        paddingBottom:
                                            multiSelectTokens.menu.item
                                                .paddingBottom,
                                        paddingLeft:
                                            multiSelectTokens.menu.item
                                                .paddingLeft,
                                    }}
                                >
                                    {Array.from({
                                        length: skeleton.count || 3,
                                    }).map((_, index) => (
                                        <Skeleton
                                            key={index}
                                            width="100%"
                                            height="33px"
                                            variant={
                                                (skeleton.variant as SkeletonVariant) ||
                                                'pulse'
                                            }
                                        />
                                    ))}
                                </Block>
                            ) : (
                                <Block
                                    display="flex"
                                    flexDirection="column"
                                    height="100%"
                                    overflow="hidden"
                                    gap={multiSelectTokens.drawer.content.gap}
                                >
                                    {isSearchEnabled && (
                                        <Block
                                            style={{
                                                paddingTop:
                                                    multiSelectTokens.drawer
                                                        .search.paddingTop,
                                                paddingRight:
                                                    multiSelectTokens.drawer
                                                        .search.paddingRight,
                                                paddingBottom:
                                                    multiSelectTokens.drawer
                                                        .search.paddingBottom,
                                                paddingLeft:
                                                    multiSelectTokens.drawer
                                                        .search.paddingLeft,
                                                marginTop:
                                                    multiSelectTokens.drawer
                                                        .search.marginTop,
                                                marginBottom:
                                                    multiSelectTokens.drawer
                                                        .search.marginBottom,
                                            }}
                                        >
                                            <TextInput
                                                size={TextInputSize.MEDIUM}
                                                placeholder={searchPlaceholder}
                                                value={searchText}
                                                onChange={(e) =>
                                                    dispatchUserValue(
                                                        e.target.value
                                                    )
                                                }
                                                aria-label={searchPlaceholder}
                                            />
                                        </Block>
                                    )}

                                    <Block
                                        role="listbox"
                                        aria-multiselectable="true"
                                        flexGrow={1}
                                        flexShrink={1}
                                        minHeight={0}
                                        overflow="auto"
                                        style={{
                                            paddingTop:
                                                multiSelectTokens.menu.list
                                                    .paddingTop,
                                            paddingRight:
                                                multiSelectTokens.menu.list
                                                    .paddingRight,
                                            paddingBottom:
                                                multiSelectTokens.menu.list
                                                    .paddingBottom,
                                            paddingLeft:
                                                multiSelectTokens.menu.list
                                                    .paddingLeft,
                                        }}
                                    >
                                        <SelectSearchStatus
                                            isControlled={
                                                isSearchControlled &&
                                                isSearchEnabled
                                            }
                                            isLoading={isActiveSearchLoading}
                                            isEmpty={!hasRenderableItems}
                                            emptyStateText={
                                                search?.emptyStateText ||
                                                (!hasSourceItems
                                                    ? 'No items available'
                                                    : 'No results found')
                                            }
                                        />

                                        {isActiveSearchLoading &&
                                        !hasRenderableItems ? null : showEmptyState ? (
                                            <Text
                                                variant="body.md"
                                                textAlign="center"
                                                color={
                                                    multiSelectTokens.menu.item
                                                        .optionsLabel.color
                                                        .default
                                                }
                                            >
                                                {search?.emptyStateText ||
                                                    (!hasSourceItems
                                                        ? 'No items available'
                                                        : 'No results found')}
                                            </Text>
                                        ) : enableVirtualization ? (
                                            <VirtualList
                                                items={toVirtualListItems(
                                                    flattenedItems
                                                )}
                                                height={
                                                    600 - searchStatusHeight
                                                }
                                                itemHeight={
                                                    virtualListItemHeight
                                                }
                                                overscan={virtualListOverscan}
                                                onEndReached={onEndReached}
                                                endReachedThreshold={
                                                    endReachedThreshold
                                                }
                                                hasMore={hasMore}
                                                renderItem={({ item }) =>
                                                    renderMenuItem(
                                                        item as FlattenedMobileMultiSelectV2Item
                                                    )
                                                }
                                            />
                                        ) : (
                                            <Block
                                                display="flex"
                                                flexDirection="column"
                                                gap={showItemDividers ? 2 : 0}
                                            >
                                                {flattenedItems.map(
                                                    (flatItem) => (
                                                        <Block
                                                            key={flatItem.id}
                                                        >
                                                            {renderMenuItem(
                                                                flatItem
                                                            )}
                                                        </Block>
                                                    )
                                                )}
                                            </Block>
                                        )}
                                    </Block>

                                    {showActionButtons &&
                                        (primaryAction || secondaryAction) && (
                                            <Block
                                                style={{
                                                    paddingTop:
                                                        multiSelectTokens.menu
                                                            .actions.paddingTop,
                                                    paddingRight:
                                                        multiSelectTokens.menu
                                                            .actions
                                                            .paddingRight,
                                                    paddingBottom:
                                                        multiSelectTokens.menu
                                                            .actions
                                                            .paddingBottom,
                                                    paddingLeft:
                                                        multiSelectTokens.menu
                                                            .actions
                                                            .paddingLeft,
                                                }}
                                                gap={
                                                    multiSelectTokens.menu
                                                        .actions.gap
                                                }
                                                display="flex"
                                                justifyContent="flex-end"
                                                borderTop={
                                                    multiSelectTokens.menu
                                                        .actions.borderTop
                                                }
                                                backgroundColor={
                                                    multiSelectTokens.menu
                                                        .actions.backgroundColor
                                                }
                                                flexShrink={0}
                                            >
                                                {secondaryAction && (
                                                    <Button
                                                        buttonType={
                                                            ButtonType.SECONDARY
                                                        }
                                                        size={ButtonSize.MEDIUM}
                                                        text={
                                                            secondaryAction.text
                                                        }
                                                        onClick={
                                                            secondaryAction.onClick
                                                        }
                                                        disabled={
                                                            secondaryAction.disabled
                                                        }
                                                        loading={
                                                            secondaryAction.loading
                                                        }
                                                        fullWidth
                                                    />
                                                )}
                                                {primaryAction && (
                                                    <Button
                                                        buttonType={
                                                            ButtonType.PRIMARY
                                                        }
                                                        size={ButtonSize.MEDIUM}
                                                        text={
                                                            primaryAction.text
                                                        }
                                                        onClick={() => {
                                                            primaryAction.onClick(
                                                                selectedValues
                                                            )
                                                            setOpen(false)
                                                        }}
                                                        disabled={
                                                            primaryAction.disabled
                                                        }
                                                        loading={
                                                            primaryAction.loading
                                                        }
                                                        fullWidth
                                                    />
                                                )}
                                            </Block>
                                        )}
                                </Block>
                            )}
                        </DrawerBody>
                    </DrawerContent>
                </DrawerPortal>
            </Drawer>

            {isContainer && (
                <InputFooter
                    hintText={hintText}
                    error={error.show}
                    errorMessage={error.message}
                    hintTextId={hintTextId}
                    errorMessageId={errorMessageId}
                />
            )}
        </Block>
    )
}

export default MobileMultiSelectV2