import type { FontWeightValue, Theme } from '@fluentui-react-native/framework';
import { cornerRadius40, fontSize300, fontWeightRegular, size40, size60, sizeNone } from '@fluentui-react-native/design/tokens/global';
import type { TokenSettings } from '@fluentui-react-native/use-styling';

import type { MenuItemCheckboxTokens } from './MenuItemCheckbox.types';

export const defaultMenuItemCheckboxTokens: TokenSettings<MenuItemCheckboxTokens, Theme> = (t: Theme): MenuItemCheckboxTokens => ({
  backgroundColor: t.colors.neutralBackground1,
  borderRadius: cornerRadius40,
  checkmarkPadding: sizeNone,
  checkmarkSize: 16,
  checkmarkVisibility: 0,
  color: t.colors.neutralForeground2,
  fontFamily: t.typography.families.primary,
  fontSize: fontSize300,
  fontWeight: fontWeightRegular as FontWeightValue,
  gap: size40,
  iconColor: t.colors.neutralForeground2,
  iconSize: 16,
  minHeight: 32,
  minWidth: 160,
  maxWidth: 300,
  padding: size60,
  hovered: {
    backgroundColor: t.colors.neutralBackground1Hover,
    color: t.colors.neutralForeground2Hover,
    iconColor: t.colors.neutralForeground2Hover,
    checked: {
      checkmarkColor: t.colors.neutralForeground2Hover,
      checkmarkVisibility: 1,
    },
  },
  pressed: {
    backgroundColor: t.colors.neutralBackground1Pressed,
    color: t.colors.neutralForeground2Pressed,
    iconColor: t.colors.neutralForeground2Pressed,
    checked: {
      checkmarkColor: t.colors.neutralForeground2Pressed,
      checkmarkVisibility: 1,
    },
  },
  disabled: {
    backgroundColor: t.colors.neutralBackground1,
    color: t.colors.neutralForegroundDisabled,
    iconColor: t.colors.neutralForegroundDisabled,
    checked: {
      checkmarkColor: t.colors.neutralForegroundDisabled,
      checkmarkVisibility: 1,
    },
  },
  checked: {
    checkmarkColor: t.colors.neutralForeground2,
    checkmarkVisibility: 1,
  },
});