import { Dimensions } from 'react-native';

import type { Theme } from '@fluentui-react-native/framework';
import { buildUseTokens } from '@fluentui-react-native/framework';
import { cornerRadius80, size160, size320 } from '@fluentui-react-native/design/tokens/global';

import type { MenuPopoverTokens } from './MenuPopover.types';
import { menuPopoverName } from './MenuPopover.types';

export const useMenuPopoverTokens = buildUseTokens<MenuPopoverTokens>(
  (t: Theme) => ({
    borderWidth: 1,
    borderColor: t.colors.neutralStrokeAccessible,
    maxHeight: Dimensions.get('window').height / 2 - size320, // Getting window height size and subtracting the padding considering on vertical
    maxWidth: Dimensions.get('window').width - size160, // Getting window height size and subtracting the screen offset a/c design
    cornerRadius: cornerRadius80,
    elevation: size160,
    minPadding: size160,
  }),
  menuPopoverName,
);