import { DialogContent } from '@reach/dialog';
import { animated } from 'react-spring/renderprops';
import { styled } from '../../styles';
import { Styles, StyledProps } from '../../styles/types';
import { Card } from '../Card';
import { IconButton } from '../IconButton';
import { Modal } from './Modal';
import { ModalStatus } from './types';

const statusBarHeight = '8px';

type ModalProps = React.ComponentProps<typeof Modal>;

type StyleProps = StyledProps<{
  status?: ModalProps['status'];
}>;

export const Container = animated(
  styled(DialogContent)({
    outline: 'none',
    maxHeight: '100%',
    pointerEvents: 'none',
  })
);

export const Dialog = styled(Card)<StyleProps>(({ theme, scroll, status }) => ({
  display: 'flex',
  flexDirection: 'column',
  position: 'relative',
  pointerEvents: 'auto',
  margin: theme.space.xl,
  maxHeight:
    scroll === 'body' ? 'none' : `calc(100vh - (${theme.space.xl} * 2))`,
  ...(status && {
    borderTopRightRadius: 0,
    borderTopLeftRadius: 0,
  }),
}));

const StatusBarStyles: Styles = ({ theme }) => ({
  position: 'absolute',
  top: `-${statusBarHeight}`,
  left: 0,
  right: 0,
  width: '100%',
  height: statusBarHeight,
  borderRadius: theme.radii[3],
  borderBottomRightRadius: 0,
  borderBottomLeftRadius: 0,
});

const loadingStyles = `
  background: linear-gradient(60deg, #252e6a, #5495e5, #5495e5, #5495e5, #252e6a);
  background-size: 300% 300%;
  animation: AnimatedGradient 3s infinite;
`;

// Not object-style due to a bug in SC https://github.com/styled-components/styled-components/issues/2561
export const StatusBar = styled.div<StyleProps>`
  ${StatusBarStyles}
  ${({ status, theme }) =>
    status &&
    (status === ModalStatus.Loading
      ? loadingStyles
      : `background: ${theme.colors[status]}`)};
  @keyframes AnimatedGradient {
    0% {
      background-position: 0 0;
    }
    50% {
      background-position: 100% 0;
    }
    100% {
      background-position: 0 0;
    }
  }
`;

export const CloseButton = styled(IconButton)`
  position: absolute;
  top: 0;
  right: 0;
  overflow: hidden;
  cursor: pointer;
  :hover {
    color: ${({ theme }) => theme.colors.gray[3]};
  }
`;
