import { useBreakpoint, useIdle, useMounted } from '@websolutespa/bom-mixer-hooks';
import { AnimatePresence, HTMLMotionProps, motion } from 'motion/react';
import styled, { css } from 'styled-components';
import { UIStyledComponentProps } from '../../components/types';
import { getCssResponsive } from '../../components/utils';

export enum BreakpointPlacement {
  TopLeft = 'topLeft',
  TopRight = 'topRight',
  BottomRight = 'bottomRight',
  BottomLeft = 'bottomLeft',
}

interface Props extends HTMLMotionProps<'div'> {
  placement?: BreakpointPlacement;
}

export type BreakpointProps = UIStyledComponentProps<Props>;

const getPlacement = (placement: BreakpointPlacement = BreakpointPlacement.BottomLeft) => {
  switch (placement) {
    case BreakpointPlacement.TopLeft: {
      return css`
      top: 6px;
      left: 6px;
    `;
    }
    case BreakpointPlacement.TopRight: {
      return css`
      top: 6px;
      right: 6px;
    `;
    }
    case BreakpointPlacement.BottomRight: {
      return css`
      bottom: 6px;
      right: 6px;
    `;
    }
    case BreakpointPlacement.BottomLeft: {
      return css`
      bottom: 6px;
      left: 6px;
    `;
    }
    default: {
      return css`
      top: 6px;
      left: 6px;
    `;
    }
  }
};

const StyledBreakpoint = styled(motion.div) <BreakpointProps>`
  position: fixed;
  padding: 0.3em 0.8em;
  background: var(--color-warning-500);
  color: var(--color-warning-900);
  border: 1px solid var(--color-warning-700);
  border-radius: 0.3em;
  z-index: 10000;
  font-family: monospace;
  font-size: 0.8rem;
  line-height: 1;
  pointer-events: none;
  ${props => getPlacement(props.placement)}
  ${props => getCssResponsive(props)}
` as typeof Breakpoint;

export const Breakpoint = ((props: BreakpointProps) => {
  const breakpoint = useBreakpoint();
  const isIdle = useIdle(3000);
  const mounted = useMounted();
  return breakpoint.max > 0 && mounted ? (
    <AnimatePresence>
      {!isIdle && (
        <StyledBreakpoint
          key="breakpoint"
          initial={{ opacity: 0, y: '100%' }}
          animate={{ opacity: 1, y: 0 }}
          exit={{ opacity: 0, y: '100%' }}
          aria-hidden="true"
          {...props}>
          {breakpoint.key} ({breakpoint.min}/{breakpoint.max < 50000 ? breakpoint.max : '∞'})
        </StyledBreakpoint>
      )}
    </AnimatePresence>
  ) : null;
});