export const clickmapStyles = {
  overlayStyle: ({ height, width }: { height: string; width: string }) => ({
    position: 'absolute',
    top: '0px',
    left: 0,
    width,
    height,
    background: 'rgba(0,0,0, 0.15)',
    zIndex: 9 * 10e3,
  }),
  totalClicks: {
    fontSize: '16px',
    fontWeight: '600',
  },
  bubbleContainer: ({
    top,
    left,
    height,
  }: {
    top: number;
    left: number;
    height: number;
  }) => ({
    position: 'absolute',
    top: top > 75 ? `${top}px` : `${height + 75}px`,
    width: '250px',
    left: `${left}px`,
    padding: '10px',
    borderRadius: '6px',
    background: 'white',
    border: '1px solid rgba(0, 0, 0, 0.12)',
    boxShadow: '0px 2px 10px 2px rgba(0,0,0,0.5)',
    transform: top > 20 ? 'translate(-25%, -110%)' : 'translate(-25%, 0%)',
    textAlign: 'center',
    visibility: 'hidden',
    zIndex: 10,
  }),
  highlight: ({
    width,
    height,
    top,
    left,
    zIndex,
  }: {
    width: number;
    height: number;
    top: number;
    left: number;
    zIndex: number;
  }) => ({
    width: `${width}px`,
    height: `${height}px`,
    border: '2px dotted red',
    cursor: 'pointer',
    top: `${top}px`,
    left: `${left}px`,
    position: 'absolute',
    zIndex,
  }),
  clicks: ({
    top,
    height,
    isRage,
    left,
  }: {
    top: number;
    height: number;
    isRage?: boolean;
    left: number;
  }) => ({
    top: top > 20 ? 0 : `${height}px`,
    left: left < 5 ? '100%' : 0,
    position: 'absolute',
    borderRadius: '999px',
    padding: '6px',
    background: isRage ? 'red' : 'white',
    color: isRage ? 'white' : 'black',
    lineHeight: '0.5',
    transform: 'translate(-70%, -70%)',
  }),
};
