/*
 * Copyright (c) 2023, Salesforce, Inc.
 * All rights reserved.
 * SPDX-License-Identifier: BSD-3-Clause
 * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
 */

import React from 'react'
import {FormattedMessage, useIntl} from 'react-intl'
import PropTypes from 'prop-types'
import {Box, Button, Wrap, WrapItem} from '@salesforce/retail-react-app/app/components/shared/ui'
import {CloseIcon} from '@salesforce/retail-react-app/app/components/icons'
import {REMOVE_FILTER} from '@salesforce/retail-react-app/app/pages/product-list/partials/refinements-utils'
import {useSelectedStore} from '@salesforce/retail-react-app/app/hooks/use-selected-store'
import {STORE_LOCATOR_IS_ENABLED} from '@salesforce/retail-react-app/app/constants'
import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'

const SelectedRefinements = ({toggleFilter, selectedFilterValues, filters, handleReset}) => {
    const {formatMessage} = useIntl()
    const {selectedStore} = useSelectedStore()
    const storeLocatorEnabled = getConfig()?.app?.storeLocatorEnabled ?? STORE_LOCATOR_IS_ENABLED
    const priceFilterValues = filters?.find((filter) => filter.attributeId === 'price')
    let selectedFilters = []
    for (const key in selectedFilterValues) {
        const filters = selectedFilterValues[key].split('|')
        filters?.forEach((filter) => {
            let uiLabel = filter

            if (key === 'price') {
                uiLabel =
                    priceFilterValues?.values?.find((priceFilter) => priceFilter.value === filter)
                        ?.label || filter
            } else if (key === 'ilids' && storeLocatorEnabled) {
                // Fallback text for in stock selected filter
                uiLabel = formatMessage({
                    id: 'selected_refinements.filter.in_stock',
                    defaultMessage: 'In Stock'
                })

                if (selectedStore?.inventoryId === filter && selectedStore?.name) {
                    uiLabel = formatMessage(
                        {
                            id: 'store_inventory_filter.checkbox.label',
                            defaultMessage: 'In stock at {storeName}'
                        },
                        {
                            storeName: selectedStore.name
                        }
                    )
                }
            }

            const selected = {
                uiLabel,
                value: key,
                apiLabel: filter
            }

            if (selected.value !== 'htype' && selected.value !== 'cgid') {
                selectedFilters.push(selected)
            }
        })
    }

    return (
        <Wrap
            direction="row"
            align="center"
            display="flex"
            flexWrap="wrap"
            data-testid="sf-selected-refinements"
        >
            {selectedFilters?.map((filter, idx) => {
                return (
                    <WrapItem key={idx}>
                        <Box marginLeft={0} marginRight={1}>
                            <Button
                                marginTop={1}
                                padding={5}
                                color="black"
                                colorScheme="gray"
                                size="sm"
                                iconSpacing={1}
                                rightIcon={
                                    <CloseIcon color="black" boxSize={4} mr="-7px" mb="-6px" />
                                }
                                onClick={() =>
                                    toggleFilter({value: filter.apiLabel}, filter.value, true)
                                }
                                aria-label={formatMessage(REMOVE_FILTER, {label: filter.uiLabel})}
                            >
                                {filter.uiLabel}
                            </Button>
                        </Box>
                    </WrapItem>
                )
            })}

            {selectedFilters?.length > 0 && (
                <WrapItem>
                    <Box>
                        <Button
                            padding={{sm: 0, base: 2}}
                            variant="link"
                            size="sm"
                            onClick={handleReset}
                            aria-label={formatMessage({
                                id: 'selected_refinements.action.assistive_msg.clear_all',
                                defaultMessage: 'Clear all filters'
                            })}
                        >
                            <FormattedMessage
                                defaultMessage="Clear All"
                                id="selected_refinements.action.clear_all"
                            />
                        </Button>
                    </Box>
                </WrapItem>
            )}
        </Wrap>
    )
}

SelectedRefinements.propTypes = {
    filters: PropTypes.array,
    selectedFilterValues: PropTypes.object,
    toggleFilter: PropTypes.func,
    handleReset: PropTypes.func
}

export default SelectedRefinements