import { makeStyles } from '@cleartrip/ct-design-style-manager';
import type { Theme } from '@cleartrip/ct-design-theme';

import type { DividerLineStyle, DividerOrientation } from './type';

/**
 * Static, platform-agnostic styles for the Divider's composable slots. The
 * width/color/style of the divider line depend on runtime props and are
 * computed at render time via `useStyles` rather than baked in here.
 */
const staticStyles = makeStyles(() => ({
  rootHorizontal: {
    width: '100%',
  },
  rootVertical: {
    height: '100%',
  },
}));

export interface IDividerDynamicStyleArgs {
  theme: Theme;
  orientation: DividerOrientation;
  dividerColor?: string;
  dividerType: DividerLineStyle;
  dividerWidth: number | string;
  dividerLength: number | string;
}

/**
 * Web dynamic style for the Divider root. Emits a single-side border
 * (`borderBottom` for horizontal, `borderRight` for vertical) so the
 * component retains its pre-migration visual.
 */
export function getDividerStylesWeb({
  theme,
  orientation,
  dividerColor,
  dividerType,
  dividerWidth,
  dividerLength,
}: IDividerDynamicStyleArgs) {
  const color = dividerColor || theme.color.border.divider;
  const widthPx = typeof dividerWidth === 'number' ? `${dividerWidth}px` : dividerWidth;

  if (orientation === 'vertical') {
    return {
      width: widthPx,
      height: dividerLength,
      borderRightWidth: widthPx,
      borderRightStyle: dividerType,
      borderRightColor: color,
    };
  }
  return {
    width: dividerLength,
    borderBottomWidth: widthPx,
    borderBottomStyle: dividerType,
    borderBottomColor: color,
  };
}

/**
 * Native dynamic style for the Divider root. React Native does not support
 * the `borderBottom` shorthand, so the three sub-properties are emitted
 * directly; the returned object is also compatible with the web renderer.
 */
export function getDividerStylesNative({
  theme,
  orientation,
  dividerColor,
  dividerType,
  dividerWidth,
  dividerLength,
}: IDividerDynamicStyleArgs) {
  const color = dividerColor || theme.color.border.divider;
  const widthPx = typeof dividerWidth === 'string' ? parseFloat(dividerWidth) || 1 : dividerWidth;

  if (orientation === 'vertical') {
    return {
      width: widthPx,
      height: dividerLength,
      borderRightWidth: widthPx,
      borderStyle: dividerType,
      borderRightColor: color,
    };
  }
  return {
    width: dividerLength,
    borderBottomWidth: widthPx,
    borderStyle: dividerType,
    borderBottomColor: color,
  };
}

export default staticStyles;