import type { VariantProps } from 'class-variance-authority';
import { cva } from 'class-variance-authority';

export { default as Item } from './Item.vue';
export { default as ItemAction } from './ItemAction.vue';
export { default as ItemContent } from './ItemContent.vue';
export { default as ItemDescription } from './ItemDescription.vue';
export { default as ItemFooter } from './ItemFooter.vue';
export { default as ItemGroup } from './ItemGroup.vue';
export { default as ItemHeader } from './ItemHeader.vue';
export { default as ItemMedia } from './ItemMedia.vue';
export { default as ItemSeparator } from './ItemSeparator.vue';
export { default as ItemTitle } from './ItemTitle.vue';

export const itemVariants = cva(
  'group/item flex items-center text-sm rounded-md transition-[background-color,color,box-shadow] [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50',
  {
    variants: {
      variant: {
        default: 'bg-transparent',
        active:
          'ui-active-indicator ui-active-indicator-active cursor-pointer bg-background-surface-muted-subtle',
        outline: 'bg-transparent border border-border-surface-default',
        hover:
          'cursor-pointer bg-transparent hover:bg-background-surface-muted-subtle',
        'hover-action':
          'cursor-pointer bg-transparent hover:bg-background-surface-muted-subtle has-[button:hover]:hover:bg-transparent has-[[data-slot=item-action]:hover]:hover:bg-transparent',
      },
      size: {
        default: 'p-3 gap-4 ',
        sm: 'p-2 gap-2.5',
        minimal: 'p-2 gap-2.5',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  },
);

export const itemMediaVariants = cva(
  'flex shrink-0 rounded-full items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none group-has-[[data-slot=item-description]]/item:translate-y-0.5',
  {
    variants: {
      variant: {
        default: 'bg-transparent',
        icon: "size-8 bg-background-surface-muted [&_svg:not([class*='size-'])]:size-4",
        image:
          'size-10 overflow-hidden [&_[data-slot=avatar]]:size-full [&_[data-slot=avatar]]:rounded-full [&_img]:size-full [&_img]:object-cover',
        'avatar-group':
          'rounded-none items-center justify-start overflow-visible [&_[data-slot=avatar-group]]:shrink-0',
      },
    },
    defaultVariants: {
      variant: 'default',
    },
  },
);

export const itemActionVariants = cva('flex items-center gap-2', {
  variants: {
    variant: {
      default: '',
      text: 'label-12-regular text-content-on-surface-muted',
      button:
        "size-6 justify-center rounded-sm text-content-on-surface-primary hover:bg-background-surface-muted-subtle has-[button]:hover:bg-transparent [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
    },
  },
  defaultVariants: {
    variant: 'default',
  },
});

export type ItemVariants = VariantProps<typeof itemVariants>;
export type ItemMediaVariants = VariantProps<typeof itemMediaVariants>;
export type ItemActionVariants = VariantProps<typeof itemActionVariants>;
