import React from 'react'
import * as Stiches from '@stitches/react'
import { keyframes } from '@stitches/react'
import { blackA } from '@radix-ui/colors'
import * as DialogPrimitive from '@radix-ui/react-dialog'
import { styled } from '../stitches.config'

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

const contentShow = keyframes({
  '0%': { opacity: 0.01 },
  '100%': { opacity: 1 }
})
const StyledOverlay = styled(DialogPrimitive.Overlay, {
  zIndex: 10000,
  backgroundColor: blackA.blackA9,
  position: 'fixed',
  inset: 0,
  top: 0,
  left: 0,
  right: 0,
  bottom: 0,
  display: 'grid',
  placeItems: 'center',
  overflowY: 'auto',
  '@media (prefers-reduced-motion: no-preference)': {
    animation: `${overlayShow} 250ms cubic-bezier(0.16, 1, 0.3, 1)`
  },
  '.dark &': {
    backgroundColor: blackA.blackA11
  }
})

const StyledContent = styled(DialogPrimitive.Content, {
  zIndex: 1000,
  backgroundColor: '$mauve2',
  color: '$mauve12',
  borderRadius: '$md',
  position: 'relative',
  mb: '15%',
  boxShadow: '0px 10px 38px -5px rgba(22, 23, 24, 0.25), 0px 10px 20px -5px rgba(22, 23, 24, 0.2)',
  width: '90vw',
  maxWidth: '450px',
  // maxHeight: "85vh",
  padding: 25,
  '@media (prefers-reduced-motion: no-preference)': {
    animation: `${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1)`
  },
  '&:focus': { outline: 'none' },
  '.dark &': {
    backgroundColor: '$mauve5',
    boxShadow: '0px 10px 38px 0px rgba(0, 0, 0, 0.85), 0px 10px 20px 0px rgba(0, 0, 0, 0.6)'
  }
})

const Content: React.FC<{ css?: Stiches.CSS }> = ({ css, children }) => {
  return (
    <StyledOverlay>
      <StyledContent css={css}>{children}</StyledContent>
    </StyledOverlay>
  )
}

const StyledTitle = styled(DialogPrimitive.Title, {
  margin: 0,
  fontWeight: 500,
  color: '$mauve12',
  fontSize: 17
})

const StyledDescription = styled(DialogPrimitive.Description, {
  margin: '10px 0 10px',
  color: '$mauve11',
  fontSize: 15,
  lineHeight: 1.5
})

// Exports
export const Dialog = styled(DialogPrimitive.Root)
export const DialogTrigger = DialogPrimitive.Trigger
export const DialogContent = Content
export const DialogTitle = StyledTitle
export const DialogDescription = StyledDescription
export const DialogClose = DialogPrimitive.Close
export const DialogPortal = DialogPrimitive.Portal