import * as DialogPrimitive from '@radix-ui/react-dialog';
import { keyframes } from '@stitches/react';
import { lightMode, styled } from './theme';

export const Dialog = DialogPrimitive.Root;
export const DialogTrigger = DialogPrimitive.Trigger;
export const DialogClose = DialogPrimitive.Close;

const overlayShow = keyframes({
  '0%': { opacity: 0 },
  '100%': { opacity: 1 },
});

const contentShowCentered = keyframes({
  '0%': { opacity: 0, transform: 'translate(-50%, -48%) scale(.96)' },
  '100%': { opacity: 1, transform: 'translate(-50%, -50%) scale(1)' },
});

const contentShowTop = keyframes({
  '0%': { opacity: 0, transform: 'translate(-50%, -10%) scale(.96)' },
  '100%': { opacity: 1, transform: 'translate(-50%, 0%) scale(1)' },
});

export const DialogOverlay = styled(DialogPrimitive.Overlay, {
  backgroundColor: '$blackA10',
  position: 'fixed',
  inset: 0,
  '@media (prefers-reduced-motion: no-preference)': {
    animation: `${overlayShow()} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
  },

  [`.${lightMode} &`]: {
    backgroundColor: '$blackA8',
  },
});

const dialogPadding = '50px';
export const DialogContainer = styled(DialogPrimitive.Content, {
  backgroundColor: '$gray2',
  borderRadius: '0.25rem',
  boxShadow:
    'hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px',
  position: 'fixed',
  left: '50%',
  top: dialogPadding,
  transform: 'translate(-50%, 0%)',
  width: '90vw',
  maxWidth: '600px',
  maxHeight: '85vh',
  padding: '1rem',
  overflow: 'auto',
  '&:focus': { outline: 'none' },
  '@media (prefers-reduced-motion: no-preference)': {
    animation: `${contentShowTop()} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
  },
  variants: {
    verticalPosition: {
      centered: {
        top: '50%',
        transform: 'translate(-50%, -50%)',
      },
      '@media (prefers-reduced-motion: no-preference)': {
        animation: `${contentShowCentered()} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
      },
    },
    size: {
      stretch: {
        width: 'auto',
        maxWidth: 'none',
        maxHeight: 'none',
        top: dialogPadding,
        bottom: dialogPadding,
        left: dialogPadding,
        right: dialogPadding,
        transform: 'none',
      },
    },
  },
});

export const DialogTitle = styled(DialogPrimitive.Title, {
  fontWeight: 'bold',
  color: '$gray12',
  fontSize: '15pt',
  borderBottom: '1px solid $teal6',
  margin: '-1rem',
  marginBottom: '1.5rem',
  padding: '1rem',
  lineHeight: '1.25',
  position: 'sticky',
  top: '-1rem',
  backgroundColor: '$gray2',
});

export const DialogDescription = styled(DialogPrimitive.Description, {
  margin: '10px 0 20px',
  color: '$teal11',
  fontSize: 15,
  lineHeight: 1.5,
});

export const DialogActions = styled('div', {
  display: 'flex',
  gap: '0.5rem',
  justifyContent: 'flex-end',
  borderTop: '1px solid $gray6',
  margin: '-1rem',
  marginTop: '2rem',
  padding: '1rem 1.5rem',
  position: 'sticky',
  backgroundColor: '$gray2',
  bottom: '-1rem',
});

export const IconButton = styled('button', {
  all: 'unset',
  fontFamily: 'inherit',
  borderRadius: '100%',
  height: 25,
  width: 25,
  display: 'inline-flex',
  alignItems: 'center',
  justifyContent: 'center',
  color: '$teal11',
  position: 'absolute',
  cursor: 'pointer',
  top: 15,
  right: 15,

  '&:hover': { backgroundColor: '$teal4' },
  '&:focus': { boxShadow: `0 0 0 2px $teal7` },
});
