import type { ViewStyle } from '@cleartrip/ct-design-types';
import type { Theme } from '@cleartrip/ct-design-theme';

import { ActionButtonAlignmentType, ModalPlacementTypes, ModalSizeTypes } from './type';

import { ActionButtonAlignment, ModalSize, ModalVariant } from './constants';

const getModalSizeStyles = (
  size: ModalSizeTypes,
): { width?: number | '100%'; height?: number | '100%'; flex?: number } => {
  switch (size) {
    case ModalSize.SMALL:
      return { width: 360 };
    case ModalSize.LARGE:
      return { width: 1032 };
    case ModalSize.FULL_SCREEN:
      return { width: '100%', height: '100%', flex: 1 };
    case ModalSize.NONE:
      return {};
    case ModalSize.BIG:
      return { width: 730 };
    case ModalSize.REGULAR:
      return { width: 484 };
    case ModalSize.MEDIUM:
    default:
      return { width: 504 };
  }
};

const getModalChildContainerCommonStyles = ({
  theme,
  size,
  blur,
}: {
  theme: Theme;
  size: ModalSizeTypes;
  blur?: boolean;
  variant?: `${ModalVariant}`;
}): {
  maxHeight?: number | '100%' | '90%';
  shadowColor?: string;
  shadowOffset?: { width: number; height: number };
  shadowOpacity?: number;
  borderRadius?: number;
} => ({
  borderRadius: size === ModalSize.FULL_SCREEN ? 0 : theme?.spacing?.['3'],
  maxHeight: size === ModalSize.FULL_SCREEN ? '100%' : '90%',
  shadowColor: blur ? '#000' : 'transparent',
  shadowOffset: blur ? { width: 0, height: 2 } : { width: 0, height: 0 },
  shadowOpacity: blur ? 0.2 : 0,
});

export const getModalChildContainerStyle = ({
  theme,
  size,
  blur,
}: {
  theme: Theme;
  size: ModalSizeTypes;
  blur: boolean;
}) => ({
  ...getModalChildContainerCommonStyles({ theme, size, blur }),
  ...getModalSizeStyles(size),
});

export const getModalPlacement = ({ placement }: { placement: ModalPlacementTypes }): ViewStyle => ({
  justifyContent: placement === 'center' ? 'center' : 'flex-end',
});

export const getActionButtonAlignment = ({
  actionButtonAlignment,
}: {
  actionButtonAlignment: ActionButtonAlignmentType;
}) => {
  switch (actionButtonAlignment) {
    case ActionButtonAlignment.CENTER:
      return { marginLeft: '50%' as unknown as number };
    case ActionButtonAlignment.LEFT:
      return { marginLeft: 0 as unknown as number };
    default:
      return { marginLeft: 'auto' as unknown as number };
  }
};