/*
Copyright (c) Uber Technologies, Inc.

This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/
import { styled } from '../styles';
import { BADGE_ENHANCER_STYLES, FLOATING_MARKER_ANCHOR_POSITIONS, LABEL_SIZES, EARNER_LOCATION_PUCK_CORE_SCALES, PINHEAD_SIZES_SHAPES, FLOATING_ROUTE_MARKER_POINTER_TRANSFORMS } from './constants';
export const getAnchorTransform = (anchor, anchorSize) => ({
  [FLOATING_MARKER_ANCHOR_POSITIONS.none]: ``,
  [FLOATING_MARKER_ANCHOR_POSITIONS.topLeft]: `translate(${anchorSize}px, ${anchorSize}px)`,
  [FLOATING_MARKER_ANCHOR_POSITIONS.topRight]: `translate(-100%, ${anchorSize}px)`,
  [FLOATING_MARKER_ANCHOR_POSITIONS.bottomLeft]: `translate(${anchorSize}px, -100%)`,
  [FLOATING_MARKER_ANCHOR_POSITIONS.bottomRight]: `translate(-100%, -100%)`
})[anchor];
export const StyledDragShadowContainer = styled('div', ({
  $theme,
  $height,
  $width,
  $dragging
}) => ({
  width: `${$width}px`,
  height: `${$height}px`,
  opacity: $dragging ? 1 : 0,
  visibility: $dragging ? 'visible' : 'hidden',
  transition: `${$theme.animation.timing300} ${$theme.animation.easeOutCurve} all`,
  position: 'relative',
  boxShadow: $theme.lighting.shadow600
}));
StyledDragShadowContainer.displayName = "StyledDragShadowContainer";
StyledDragShadowContainer.displayName = 'StyledDragShadowContainer';
export const StyledDragShadow = styled('div', ({
  $theme,
  $background,
  $width
}) => ({
  backgroundColor: $background,
  borderRadius: '50%',
  width: `${$width}px`,
  height: '4px',
  position: 'absolute',
  bottom: 0
}));
StyledDragShadow.displayName = "StyledDragShadow";
StyledDragShadow.displayName = 'StyledDragShadow';
export const StyledNeedle = styled('div', ({
  $theme,
  $background,
  $height
}) => ({
  backgroundColor: $background,
  width: '4px',
  height: `${$height}px`,
  boxShadow: $theme.lighting.shadow600
}));
StyledNeedle.displayName = "StyledNeedle";
StyledNeedle.displayName = 'StyledNeedle';
export const StyledFloatingMarkerRoot = styled('div', ({
  $size
}) => ({
  position: 'relative',
  height: `${$size}px`,
  width: `${$size}px`
}));
StyledFloatingMarkerRoot.displayName = "StyledFloatingMarkerRoot";
StyledFloatingMarkerRoot.displayName = 'StyledFloatingMarkerRoot';
export const StyledFloatingMarkerPinHeadContainer = styled('div', ({
  $theme,
  $anchor,
  $anchorSize
}) => ({
  position: 'absolute',
  transition: `${$theme.animation.timing300} ${$theme.animation.easeOutCurve} all`,
  transform: getAnchorTransform($anchor, $anchorSize)
}));
StyledFloatingMarkerPinHeadContainer.displayName = "StyledFloatingMarkerPinHeadContainer";
StyledFloatingMarkerPinHeadContainer.displayName = 'StyledFloatingMarkerPinHeadContainer';
export const StyledFloatingMarkerAnchorContainer = styled('div', () => ({
  position: 'absolute'
}));
StyledFloatingMarkerAnchorContainer.displayName = "StyledFloatingMarkerAnchorContainer";
StyledFloatingMarkerAnchorContainer.displayName = 'StyledFloatingMarkerAnchorContainer';
export const StyledFixedMarkerRoot = styled('div', () => ({
  display: 'flex',
  alignItems: 'center',
  flexDirection: 'column'
}));
StyledFixedMarkerRoot.displayName = "StyledFixedMarkerRoot";
StyledFixedMarkerRoot.displayName = 'StyledFixedMarkerRoot';
export const StyledFixedMarkerDragContainer = styled('div', ({
  $theme,
  $translateAmount,
  $performTranslate
}) => {
  return {
    transform: `translateY(${$performTranslate ? `${$translateAmount}px` : '0px'})`,
    transition: `${$theme.animation.timing300} ${$theme.animation.easeOutCurve} all`,
    display: 'flex',
    alignItems: 'center',
    flexDirection: 'column'
  };
});
StyledFixedMarkerDragContainer.displayName = "StyledFixedMarkerDragContainer";
StyledFixedMarkerDragContainer.displayName = 'StyledFixedMarkerDragContainer';
export const StyledOuterXXSmallAnchor = styled('div', ({
  $theme,
  $round,
  $background,
  $size
}) => ({
  backgroundColor: $background,
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  height: `${$size}px`,
  width: `${$size}px`,
  borderRadius: $round ? '50%' : 0,
  boxShadow: $theme.lighting.shadow600
}));
StyledOuterXXSmallAnchor.displayName = "StyledOuterXXSmallAnchor";
StyledOuterXXSmallAnchor.displayName = 'StyledOuterXXSmallAnchor';
export const StyledInnerXXSmallAnchor = styled('div', ({
  $round,
  $color,
  $size
}) => ({
  backgroundColor: $color,
  height: `${$size}px`,
  width: `${$size}px`,
  borderRadius: $round ? '50%' : 0
}));
StyledInnerXXSmallAnchor.displayName = "StyledInnerXXSmallAnchor";
StyledInnerXXSmallAnchor.displayName = 'StyledInnerXXSmallAnchor';
export const StyledOuterXSmallAnchor = styled('div', ({
  $theme,
  $round,
  $background,
  $size
}) => ({
  backgroundColor: $background,
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  height: `${$size}px`,
  width: `${$size}px`,
  borderRadius: $round ? '50%' : 0,
  boxShadow: $theme.lighting.shadow600
}));
StyledOuterXSmallAnchor.displayName = "StyledOuterXSmallAnchor";
StyledOuterXSmallAnchor.displayName = 'StyledOuterXSmallAnchor';
export const StyledInnerXSmallAnchor = styled('div', ({
  $round,
  $color,
  $size
}) => ({
  backgroundColor: $color,
  height: `${$size}px`,
  width: `${$size}px`,
  borderRadius: $round ? '50%' : 0
}));
StyledInnerXSmallAnchor.displayName = "StyledInnerXSmallAnchor";
StyledInnerXSmallAnchor.displayName = 'StyledInnerXSmallAnchor';
export const StyledPinHead = styled('div', ({
  $theme,
  $height,
  $background,
  $gridTemplateColumns,
  $type,
  $forceCircle
}) => {
  const sharedStyles = {
    fixed: {
      padding: '0px 12px',
      borderRadius: `${$height}px`
    },
    floating: {
      padding: '0px 8px'
    }
  };
  return {
    backgroundColor: $background,
    height: `${$height}px`,
    display: 'grid',
    gridTemplateColumns: $gridTemplateColumns,
    gap: '8px',
    boxShadow: $theme.lighting.shadow600,
    whiteSpace: 'nowrap',
    // @ts-ignore
    ...sharedStyles[$type],
    ...($forceCircle && {
      width: `${$height}px`,
      display: 'flex',
      justifyContent: 'center',
      boxSizing: 'border-box'
    })
  };
});
StyledPinHead.displayName = "StyledPinHead";
StyledPinHead.displayName = 'StyledPinHead';
export const StyledStrokedLabelContainer = styled('div', ({
  $position,
  $theme,
  $labelOffset
}) => {
  const staticLabelOffset = 4;
  const positions = {
    top: {
      left: `calc(50% + ${staticLabelOffset}px)`,
      bottom: '100%',
      alignItems: 'flex-end',
      justifyContent: 'center',
      textAlign: 'center'
    },
    bottom: {
      left: '50%',
      top: `calc(100% + ${staticLabelOffset}px + ${$labelOffset}px)`,
      alignItems: 'flex-start',
      justifyContent: 'center',
      textAlign: 'center'
    },
    right: {
      left: `calc(100% + ${staticLabelOffset}px)`,
      top: '50%',
      alignItems: 'center',
      justifyContent: 'flex-start'
    },
    left: {
      right: `calc(100% + ${staticLabelOffset}px)`,
      top: '50%',
      alignItems: 'center',
      justifyContent: 'flex-end',
      textAlign: 'right'
    },
    none: {}
  };
  return {
    position: 'absolute',
    width: '0px',
    height: '0px',
    pointerEvents: 'none',
    display: 'flex',
    ...positions[$position]
  };
});
StyledStrokedLabelContainer.displayName = "StyledStrokedLabelContainer";
StyledStrokedLabelContainer.displayName = 'StyledStrokedLabelContainer';
export const StyledStrokedLabel = styled('div', ({
  $theme,
  $size
}) => {
  const strokeWidth = 1.5;
  const strokeColor = $theme.colors.borderInverseSelected;
  const textShadow = `-${strokeWidth}px -${strokeWidth}px 0 ${strokeColor},
    0 -${strokeWidth}px 0 ${strokeColor},
    ${strokeWidth}px -${strokeWidth}px 0 ${strokeColor},
    ${strokeWidth}px 0 0 ${strokeColor},
    ${strokeWidth}px ${strokeWidth}px 0 ${strokeColor},
    0 ${strokeWidth}px 0 ${strokeColor},
   -${strokeWidth}px ${strokeWidth}px 0 ${strokeColor},
   -${strokeWidth}px 0 0 ${strokeColor}`;
  return {
    display: 'flex',
    // @ts-ignore
    ...$theme.typography[LABEL_SIZES[$size]],
    color: $theme.colors.contentPrimary,
    transition: `${$theme.animation.timing300} ${$theme.animation.easeOutCurve} all`,
    textShadow,
    pointerEvents: 'auto',
    width: 'max-content',
    maxWidth: '200px'
  };
});
StyledStrokedLabel.displayName = "StyledStrokedLabel";
StyledStrokedLabel.displayName = 'StyledStrokedLabel';
export const StyledBadgeEnhancerRoot = styled('div', ({
  $theme,
  $size,
  $position
}) => {
  const {
    x,
    y
  } = $position;
  return {
    position: 'absolute',
    ...$theme.typography.LabelSmall,
    backgroundColor: $theme.colors.backgroundAccent,
    color: $theme.colors.contentOnColor,
    boxSizing: 'border-box',
    right: 0,
    transform: `translate(calc(100% + ${x}px), ${y}px)`,
    transition: `${$theme.animation.timing300} ${$theme.animation.easeOutCurve} all`,
    ...BADGE_ENHANCER_STYLES[$size]
  };
});
StyledBadgeEnhancerRoot.displayName = "StyledBadgeEnhancerRoot";
StyledBadgeEnhancerRoot.displayName = 'StyledBadgeEnhancerRoot';
export const RelativeContainer = styled('div', () => {
  return {
    position: 'relative'
  };
});
RelativeContainer.displayName = "RelativeContainer";
RelativeContainer.displayName = 'RelativeContainer';
export const StyledEnhancerSlot = styled('div', ({
  $theme,
  $color,
  $height,
  $size
}) => {
  return { // @ts-ignore
    ...$theme.typography[LABEL_SIZES[$size]],
    display: 'flex',
    alignItems: 'center',
    textAlign: 'center',
    lineHeight: `${$height}px`,
    height: `${$height}px`,
    color: $color
  };
});
StyledEnhancerSlot.displayName = "StyledEnhancerSlot";
export const StyledFloatingRouteMarkerRoot = styled('div', ({
  $theme,
  $height,
  $background,
  $gridTemplateColumns
}) => {
  return {
    position: 'absolute',
    backgroundColor: $background,
    height: `${$height}px`,
    display: 'grid',
    gridTemplateColumns: $gridTemplateColumns,
    gap: '8px',
    filter: `drop-shadow(${$theme.lighting.shadow600})`,
    whiteSpace: 'nowrap',
    borderRadius: `${8}px`,
    padding: `${4}px ${8}px`,
    transition: `${$theme.animation.timing300} ${$theme.animation.easeOutCurve} all`
  };
});
StyledFloatingRouteMarkerRoot.displayName = "StyledFloatingRouteMarkerRoot";
StyledFloatingRouteMarkerRoot.displayName = 'StyledFloatingRouteMarkerRoot';
StyledEnhancerSlot.displayName = 'StyledEnhancerSlot';
export const StyledLabelSlot = styled('div', () => {
  return {
    display: 'flex',
    justifyContent: 'center',
    flexDirection: 'column'
  };
});
StyledLabelSlot.displayName = "StyledLabelSlot";
StyledLabelSlot.displayName = 'StyledLabelSlot';
export const StyledLabel = styled('div', ({
  $theme,
  $size,
  $renderSecondaryLabel,
  $color
}) => {
  const pinheadSizeOrder = Object.values(PINHEAD_SIZES_SHAPES);
  let labelSizeIndex = pinheadSizeOrder.findIndex(x => $size === x);

  if ($renderSecondaryLabel) {
    labelSizeIndex--;
  }

  const typographyStyle = LABEL_SIZES[pinheadSizeOrder[labelSizeIndex]];
  return { ...$theme.typography[typographyStyle],
    color: $color
  };
});
StyledLabel.displayName = "StyledLabel";
StyledLabel.displayName = 'StyledLabel';
export const LocationPuckContainer = styled('div', () => {
  return {
    position: 'relative',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center'
  };
});
LocationPuckContainer.displayName = "LocationPuckContainer";
LocationPuckContainer.displayName = 'LocationPuckContainer';
export const consumerLocationShadow = {
  boxShadow: `0px 2px 4px 0px rgba(67, 76, 123, 0.2)`
};
export const earnerLocationShadow = {
  boxShadow: `0px 3px 5px 0px rgba(67, 76, 123, 0.4)`
};
export const StyledConsumerLocationPuckCore = styled('div', ({
  $theme
}) => {
  return {
    height: `${12}px`,
    width: `${12}px`,
    background: $theme.colors.contentAccent,
    borderRadius: `${100}px `,
    position: 'absolute',
    ...consumerLocationShadow
  };
});
StyledConsumerLocationPuckCore.displayName = "StyledConsumerLocationPuckCore";
export const StyledLocationPuckApproximation = styled('div', ({
  $theme,
  $color,
  $radius
}) => {
  return {
    background: $color,
    opacity: 0.12,
    height: `${$radius / 2}px`,
    width: `${$radius / 2}px`,
    borderRadius: `${10000}px `,
    position: 'absolute',
    transition: `${$theme.animation.timing300} ${$theme.animation.easeOutCurve} all`
  };
});
StyledLocationPuckApproximation.displayName = "StyledLocationPuckApproximation";
StyledLocationPuckApproximation.displayName = 'StyledLocationPuckApproximation';
export const StyledEarnerLocationPuckCore = styled('div', ({
  $theme,
  $color,
  $size
}) => {
  return {
    position: 'absolute',
    transform: `scale(${EARNER_LOCATION_PUCK_CORE_SCALES[$size]})`,
    transition: `${$theme.animation.timing300} ${$theme.animation.easeOutCurve} all`,
    ...earnerLocationShadow,
    borderRadius: '50%',
    height: `${72}px`,
    width: `${72}px`,
    background: $theme.colors.backgroundPrimary,
    border: `${6}px solid ${$color}`,
    boxSizing: 'border-box'
  };
});
StyledEarnerLocationPuckCore.displayName = "StyledEarnerLocationPuckCore";
StyledEarnerLocationPuckCore.displayName = 'StyledEarnerLocationPuckCore';
export const StyledFloatingRouteMarkerPointerContainer = styled('svg', ({
  $position
}) => {
  return {
    position: 'absolute',
    ...FLOATING_ROUTE_MARKER_POINTER_TRANSFORMS[$position]
  };
});
StyledFloatingRouteMarkerPointerContainer.displayName = "StyledFloatingRouteMarkerPointerContainer";
StyledFloatingRouteMarkerPointerContainer.displayName = 'StyledFloatingRouteMarkerPointerContainer';
export const StyledFloatingRouteMarkerPointer = styled('path', ({
  $theme,
  $background
}) => {
  return {
    transition: `${$theme.animation.timing300} ${$theme.animation.easeOutCurve} all`,
    fill: $background
  };
});
StyledFloatingRouteMarkerPointer.displayName = "StyledFloatingRouteMarkerPointer";
StyledFloatingRouteMarkerPointer.displayName = 'StyledFloatingRouteMarkerPointer';