import * as React from 'react'
import {
    align,
    theme,
    cursor,
    overflow,
    sizePx,
    spacingPx,
    states,
    text,
    iconSizes,
    useIsFocusVisible,
} from '@planview/pv-utilities'
import { Tooltip } from '@planview/pv-uikit'
import styled from 'styled-components'
//Logos
import {
    Adaptivework,
    Ea,
    Ideaplace,
    Okrs,
    Portfolios,
    Projectplace,
    Roadmaps,
    Agileplace,
    Changepoint,
    Viz,
    Admin,
    PpmPro,
    ProjectAdvantage,
    ReleaseAndVerify,
} from '../logos'

import type { ProductType } from '../types'

const MainWrap = styled.li`
    list-style: none;
    background-color: ${theme.backgroundNeutral0};

    &:hover {
        background-color: ${theme.backgroundNeutral0Hover};
        ${cursor.pointer};
    }
`

const StyledAnchor = styled.a<{ $focusVisible: boolean; $hasLogo: boolean }>`
    ${align.centerV};
    box-sizing: border-box;
    padding-right: ${spacingPx.small};
    padding-left: ${(props) => (props.$hasLogo ? '0' : spacingPx.small)};
    width: 100%;
    height: ${sizePx.medium};
    min-height: ${sizePx.medium};
    overflow: hidden;
    text-decoration: none;
    ${(props) =>
        props['aria-checked']
            ? states.activeTranslucent()
            : 'border: 1px solid transparent'};
    ${(props) => states.focus({ focusVisible: props.$focusVisible })}
`

const LogoContainer = styled.div`
    ${align.center};
    height: 100%;
    width: ${sizePx.medium};
    flex-shrink: 0;

    svg {
        height: ${iconSizes.large}px;
    }
`

const LabelWrap = styled.div`
    ${align.centerH};
    flex-direction: column;
    overflow: hidden;
`

const Label = styled.span`
    ${text.regular};
    color: ${theme.textPrimary};
    min-width: ${sizePx.medium};
    ${overflow.ellipsis};
    margin-right: ${spacingPx.small};
`

const SecondaryLabel = styled.span<{ $active: boolean }>`
    ${text.small};
    color: ${({ $active }) =>
        $active ? theme.textPrimary : theme.textSecondary};
    min-width: ${sizePx.medium};
    ${overflow.ellipsis};
    margin-right: ${spacingPx.small};
`

type Props = {
    /** Primary text: Generally the product or capability name */
    label: string

    /** Secondary, complementary label to describe what instance of the product/capability */
    secondaryLabel?: string

    /** Used to indicate the current application the user is in */
    active?: boolean

    /** Called when the user selects the item */
    onActivate?: () => void

    /** A product short code which ultimately maps to an icon */
    app: ProductType

    /** @internal Used to manage the roving tab index */
    tabIndex?: number

    /** URL of the application. Used to enable browser shortcuts for opening in a new tab, etc, by rendering as an anchor element. */
    url?: string
}

const getAppLogo = (app: ProductType): React.JSX.Element | null => {
    switch (app) {
        case 'adaptivework':
            return <Adaptivework role="presentation" />
        case 'changepoint':
            return <Changepoint role="presentation" />
        case 'e1_prm':
            return <Portfolios role="presentation" />
        case 'e1_ctm':
        case 'ea':
            return <Ea role="presentation" />
        case 'leankit':
            return <Agileplace role="presentation" />
        case 'teamtap':
        case 'spigit':
            return <Ideaplace role="presentation" />
        case 'ppmpro':
            return <PpmPro role="presentation" />
        case 'pvadmin':
            return <Admin role="presentation" />
        case 'projectplace':
            return <Projectplace role="presentation" />
        case 'roadmaps':
            return <Roadmaps role="presentation" />
        case 'okrs':
            return <Okrs role="presentation" />
        case 'viz':
            return <Viz role="presentation" />
        case 'project_advantage':
            return <ProjectAdvantage role="presentation" />
        case 'plutora':
        case 'release_and_verify':
            return <ReleaseAndVerify role="presentation" />
        case 'planview_me':
        default:
            return null
    }
}
/**
 * Implements the [Design System specs](https://design.planview.com/components/product-switcher/product-switcher-list-item)
 *
 */
const ProductSwitcherListItem = ({
    app,
    label,
    secondaryLabel,
    active,
    onActivate,
    tabIndex = -1,
    url,
}: Props): React.ReactElement<Props> => {
    const outerRef = React.useRef<HTMLAnchorElement>(undefined)
    const {
        innerRef: _innerRef,
        focusVisible,
        ...focusProps
    } = useIsFocusVisible()
    const SetOuterRef = React.useCallback(
        (el: HTMLAnchorElement) => {
            if (el) {
                outerRef.current = el
                if (tabIndex === 0) {
                    el.focus()
                }
            }
        },
        [tabIndex]
    )

    const handleKeyDown: React.KeyboardEventHandler<HTMLAnchorElement> =
        React.useCallback(
            (ev) => {
                if (
                    ev.key === 'Enter' ||
                    ev.key === 'Space' ||
                    ev.key === ' '
                ) {
                    if (ev.key === ' ') {
                        ev.preventDefault()
                    }
                    onActivate?.()
                }
            },
            [onActivate]
        )

    React.useEffect(() => {
        if (tabIndex === 0 && outerRef.current) {
            outerRef.current.focus()
        }
    }, [tabIndex])

    const logo = getAppLogo(app)

    return (
        <MainWrap role="none">
            <StyledAnchor
                {...focusProps}
                $focusVisible={focusVisible}
                ref={SetOuterRef}
                role="menuitemradio"
                aria-checked={active ? 'true' : undefined}
                tabIndex={tabIndex}
                onKeyDown={handleKeyDown}
                onClick={(ev) => {
                    ev.preventDefault()
                    onActivate?.()
                }}
                href={url}
                $hasLogo={!!logo}
            >
                {logo && <LogoContainer>{logo}</LogoContainer>}
                <LabelWrap>
                    <Tooltip unwrapped show="ellipsed" text={label}>
                        <Label>{label}</Label>
                    </Tooltip>
                    {secondaryLabel ? (
                        <Tooltip
                            unwrapped
                            show="ellipsed"
                            text={secondaryLabel}
                        >
                            <SecondaryLabel $active={!!active}>
                                {secondaryLabel}
                            </SecondaryLabel>
                        </Tooltip>
                    ) : null}
                </LabelWrap>
            </StyledAnchor>
        </MainWrap>
    )
}

export { ProductSwitcherListItem }
export default ProductSwitcherListItem