import { breakpoints } from '@planview/pv-utilities'

const { PHONE, TABLET_PORTRAIT, TABLET_LANDSCAPE, DESKTOP } = breakpoints
export const BREAKPOINT_PHONE = 'PHONE'
export const BREAKPOINT_TABLET_PORTRAIT = 'TABLET_PORTRAIT'
export const BREAKPOINT_TABLET_LANDSCAPE = 'TABLET_LANDSCAPE'
export const BREAKPOINT_DESKTOP = 'DESKTOP'
export const BREAKPOINT_DESKTOP_HD = 'DESKTOP_HD'

export const DISPLAY_ON_PHONE = 'phone'
export const DISPLAY_ON_TABLET_PORTRAIT = 'tablet-portrait'
export const DISPLAY_ON_TABLET_LANDSCAPE = 'tablet-landscape'
export const DISPLAY_ON_DESKTOP = 'desktop'
export const DISPLAY_ON_DESKTOP_HD = 'desktop-hd'

export type DisplayOnType =
    | typeof DISPLAY_ON_PHONE
    | typeof DISPLAY_ON_TABLET_PORTRAIT
    | typeof DISPLAY_ON_TABLET_LANDSCAPE
    | typeof DISPLAY_ON_DESKTOP
    | typeof DISPLAY_ON_DESKTOP_HD

export function shouldDisplayAtBreakpoint(
    breakpoint: string,
    displayOn: DisplayOnType
) {
    switch (displayOn) {
        case DISPLAY_ON_PHONE:
            return false

        case DISPLAY_ON_TABLET_PORTRAIT:
            return ![
                BREAKPOINT_TABLET_PORTRAIT,
                BREAKPOINT_TABLET_LANDSCAPE,
                BREAKPOINT_DESKTOP,
                BREAKPOINT_DESKTOP_HD,
            ].includes(breakpoint)
        case DISPLAY_ON_TABLET_LANDSCAPE:
            return ![
                BREAKPOINT_TABLET_LANDSCAPE,
                BREAKPOINT_DESKTOP,
                BREAKPOINT_DESKTOP_HD,
            ].includes(breakpoint)
        case DISPLAY_ON_DESKTOP:
            return ![BREAKPOINT_DESKTOP, BREAKPOINT_DESKTOP_HD].includes(
                breakpoint
            )
        default:
            return ![BREAKPOINT_DESKTOP_HD].includes(breakpoint)
    }
}

export const getBreakPoint = (w: number) => {
    let breakpoint = BREAKPOINT_DESKTOP_HD
    let showLabels = true
    let showSeparators = true
    if (w <= PHONE) {
        breakpoint = BREAKPOINT_PHONE
        showLabels = false
        showSeparators = false
    } else if (w <= TABLET_PORTRAIT) {
        breakpoint = BREAKPOINT_TABLET_PORTRAIT
        showLabels = false
        showSeparators = false
    } else if (w <= TABLET_LANDSCAPE) {
        breakpoint = BREAKPOINT_TABLET_LANDSCAPE
    } else if (w <= DESKTOP) {
        breakpoint = BREAKPOINT_DESKTOP
    }
    return { breakpoint, showLabels, showSeparators }
}

export type ReactChildType = React.ReactNode

let counter = 0

export function uniqueId(): string {
    return `tci_${++counter}`
}