import { ReactNode } from 'react'
import { styled } from 'styleh-components'
import { modalInAnimation } from './styled.animations'

/**
 * @todo simplify this dom, merge this with the ModalBox?
 */
export const ModalBoxWrap = styled.div`
  position: relative;
  display: flex;
  align-self: center;
  background-color: $colors-main-background;
  @phone-or-smaller() {
    align-items: center;
    justify-content: center;
    width: 100%;
    max-height: 85%;
    transition: transform 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }
  @tablet-or-smaller() {
    transform: translateY(110%);
    animation-name: ${modalInAnimation as any};
    animation-delay: 0.24s;
    transition: transform 1000ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation-duration: 1.2s;
    animation-fill-mode: forwards;
  }
`
export interface StyledModalTitleProps {
  text?: string
  children?: ReactNode
}
export const ModalTitle = styled.h2 `
  padding: $spacing $spacing2x;
  background-color: $colors-main-background;
  border-bottom: 1px solid $colors-light-border;
  font: $font-modal-header;
  text-transform: uppercase;
`
/**
 * used by a consumer, the thing usually with a bg
 */
export const ModalBox = styled.aside.attrs({
  className: 'modal-box',
}) `
  display: flex;
  justify-content: center;
  align-self: center;
  flex-direction: column;

  @phone-or-smaller() {
    width: 100%;
  }
`
/**
 * @name was ModalWrapper
 */
export const StyledDialog = styled.dialog`
  ${(props: { isVisible: boolean }) =>
    props.isVisible
      ? styled.css `
          opacity: 1;
        `
      : styled.css `
          opacity: 0.5;
        `};

  overflow: hidden;
  backface-visibility: hidden;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  flex: 1;
  z-index: 70;
  border: 0;
  background-color: transparent;

  /* change this to change animation */
  min-height: 100vh;
`