import type * as CSS from 'csstype';

import {
  createCustomProps,
  CustomPropTypes,
} from '../../utils/createCustomProps';
import { ColorsWithHue } from '../primitives/colors';

export const webProps = {
  cursor: true,
  userSelect: true,
  resize: true,
  visibility: true,
  objectFit: true,
  objectPosition: true,
  outlineStyle: true,
  outlineWidth: true,
  outlineOffset: true,
  outlineColor: {
    property: 'outlineColor' as const,
    scale: 'colors' as const,
  },
};

export const webOnly = createCustomProps(webProps);

export interface WebOnlyProps {
  /**
   * Supported only on the Web platform
   */
  cursor?: CustomPropTypes<CSS.Property.Cursor>;
  /**
   * Supported only on the Web platform
   */
  userSelect?: CustomPropTypes<CSS.Property.UserSelect>;
  /**
   * Supported only on the Web platform
   */
  resize?: CustomPropTypes<CSS.Property.Resize>;
  /**
   * Supported only on the Web platform
   */
  visibility?: CustomPropTypes<CSS.Property.Visibility>;
  /**
   * Supported only on the Web platform
   */
  objectFit?: CustomPropTypes<CSS.Property.ObjectFit>;
  /**
   * Supported only on the Web platform
   */
  objectPosition?: CustomPropTypes<CSS.Property.ObjectPosition>;
  /**
   * Supported only on the Web platform
   */
  outlineStyle?: CustomPropTypes<CSS.Property.OutlineStyle>;
  /**
   * Supported only on the Web platform
   */
  outlineWidth?: CustomPropTypes<CSS.Property.OutlineWidth>;
  /**
   * Supported only on the Web platform
   */
  outlineOffset?: CustomPropTypes<CSS.Property.OutlineOffset>;
  /**
   * Supported only on the Web platform
   */
  outlineColor?: CustomPropTypes<ColorsWithHue>;
}