import { Platform } from 'react-native';
import { cva, type VariantProps } from 'class-variance-authority';
import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/constants';

export const sliderColorOptions = ['action', 'danger', 'warning', 'success', 'info'] as const;
export type SliderColor = (typeof sliderColorOptions)[number];

export const sliderRootVariants = cva(
  [
    'relative w-full touch-none select-none',
    'data-[disabled=true]:opacity-[var(--opacity-disabled)]',
    DISABLED_CURSOR,
    'web:outline-none',
  ],
  {
    variants: {
      orientation: {
        horizontal: 'h-5 overflow-visible',
        vertical: 'flex h-48 w-8 items-center justify-center overflow-visible',
      },
    },
    defaultVariants: {
      orientation: 'horizontal',
    },
  },
);

export const sliderRailVariants = cva(
  ['relative w-full overflow-hidden rounded-full', TRANSITION_COLORS],
  {
    variants: {
      orientation: {
        horizontal: 'h-1.5',
        vertical: 'h-full w-1.5',
      },
    },
    defaultVariants: {
      orientation: 'horizontal',
    },
  },
);

export const sliderRailColorVariants = cva([], {
  variants: {
    color: {
      action: 'bg-surface-action-subtle',
      danger: 'bg-surface-danger-subtle',
      warning: 'bg-surface-warning-subtle',
      success: 'bg-surface-success-subtle',
      info: 'bg-surface-info-subtle',
    },
  },
  defaultVariants: {
    color: 'action',
  },
});

export const sliderTrackVariants = cva(['rounded-full transition-none'], {
  variants: {
    orientation: {
      horizontal: '',
      vertical: '',
    },
  },
  defaultVariants: {
    orientation: 'horizontal',
  },
});

export const sliderTrackColorVariants = cva([], {
  variants: {
    color: {
      action: 'bg-surface-action-strong',
      danger: 'bg-surface-danger-strong',
      warning: 'bg-surface-warning-strong',
      success: 'bg-surface-success-strong',
      info: 'bg-surface-info-strong',
    },
  },
  defaultVariants: {
    color: 'action',
  },
});

export const sliderThumbVariants = cva(
  [
    'box-border size-5 z-2 overflow-visible rounded-full bg-white border-3 border-solid shadow-md',
    'web:cursor-grab web:active:cursor-grabbing',
    'transition-[transform,box-shadow,opacity] duration-150',
    'data-[dragging=true]:transition-none',
    Platform.select({
      default: 'data-[active=true]:scale-105',
      web: 'data-[hover=true]:scale-110 data-[dragging=true]:scale-110 data-[hover=true]:shadow-lg web:data-[focus-visible=true]:ring-4 web:data-[focus-visible=true]:ring-stroke-focus',
    }),
  ],
  {
    variants: {
      color: {
        action: 'border-surface-action-strong',
        danger: 'border-surface-danger-strong',
        warning: 'border-surface-warning-strong',
        success: 'border-surface-success-strong',
        info: 'border-surface-info-strong',
      },
    },
    defaultVariants: {
      color: 'action',
    },
  },
);

export const sliderThumbHaloVariants = cva(['hidden'], {
  variants: {
    visible: {
      true: '',
      false: '',
    },
  },
  defaultVariants: { visible: false },
});

export const sliderPopupBaseVariants = cva([
  'rounded-md bg-white px-2 py-1',
  'text-content-primary text-xs font-medium shadow-md select-none pointer-events-none',
]);

export const sliderMarkerVariants = cva(
  ['rounded-full size-0.5 shrink-0', 'data-[value=0]:hidden data-[value=100]:hidden'],
  {
    variants: {
      filled: {
        true: 'bg-surface-action-subtle',
        false: 'bg-content-action',
      },
    },
    defaultVariants: {
      filled: false,
    },
  },
);

export type SliderVariantProps = VariantProps<typeof sliderRootVariants> &
  VariantProps<typeof sliderRailVariants> &
  VariantProps<typeof sliderRailColorVariants> &
  VariantProps<typeof sliderTrackVariants> &
  VariantProps<typeof sliderTrackColorVariants> &
  VariantProps<typeof sliderThumbVariants>;