import * as React from 'react'
import { theme, sizePx } from '@planview/pv-utilities'
import { Spinner } from '@planview/pv-uikit'
import styled from 'styled-components'
import { defineMessages, useIntl } from 'react-intl'

const MainWrap = styled.li`
    list-style: none;
    background-color: ${theme.backgroundNeutral0};
    height: ${sizePx.medium};
    display: grid;
    place-content: center;
`

const messages = defineMessages({
    loadingLabel: {
        defaultMessage: 'Loading your Planview products',
        description:
            'Accessibility message used only when product switcher is launched while still loading',
        id: 'pvds.toolbar.productSwitcherLoading',
    },
})

const ProductSwitcherLoading = () => {
    const intl = useIntl()

    const loadingLabel = intl.formatMessage(messages.loadingLabel)

    return (
        <MainWrap
            role="menuitemradio"
            id="app-switcher-loader"
            aria-label={loadingLabel}
        >
            <Spinner size="medium" />
        </MainWrap>
    )
}

export { ProductSwitcherLoading }
export default ProductSwitcherLoading