import { scale } from '../../utils/scale';
import type { GlobalTheme } from '../global';

const getFilterTriggerTheme = (theme: GlobalTheme) => {
  const borderWidths = {
    wrapper: {
      filled: theme.borderWidths.base,
      outlined: theme.borderWidths.base,
      ghost: 0,
    },
  };
  const colors = {
    wrapper: {
      background: {
        active: {
          filled: theme.colors.highlightedSurface,
          outlined: theme.colors.highlightedSurface,
          ghost: theme.colors.highlightedSurface,
          filledLabeless: theme.colors.highlightedSurface,
        },
        inactive: {
          filled: theme.colors.neutralGlobalSurface,
          outlined: 'transparent',
          ghost: 'transparent',
        },
      },
      border: {
        active: {
          filled: theme.colors.highlightedSurface,
          outlined: theme.colors.primary,
          ghost: 'transparent',
          filledLabeless: theme.colors.highlightedSurface,
        },
        inactive: {
          filled: theme.colors.neutralGlobalSurface,
          outlined: theme.colors.primary,
          ghost: 'transparent',
        },
      },
    },
  };

  const space = {
    wrapper: {
      default: {
        paddingHorizontal: theme.space.smallMedium,
        paddingVertical: theme.space.xsmall,
      },
      labeless: {
        paddingHorizontal: theme.space.small,
        paddingVertical: theme.space.xsmall,
      },
      itemGap: theme.space.xsmall,
    },
    badge: {
      labelessRight: theme.space.xxsmall,
      labelessBottom: theme.space.xxsmall,
    },
  };

  const radii = {
    wrapper: {
      default: theme.radii.xxxlarge,
      labeless: theme.radii.xlarge,
    },
  };

  const sizes = {
    wrapperHeight: scale(36),
  };

  const lineHeights = {
    text: theme.lineHeights.small,
  };

  return {
    colors,
    space,
    radii,
    borderWidths,
    sizes,
    lineHeights,
  };
};

export default getFilterTriggerTheme;