import styled, { css } from 'styled-components/macro'

import { isMobileDevice } from 'config/userAgent'
import { devices } from 'config/devices'

import { ModalWindow } from 'features/Modal/styled'
import { Modal as BaseModal } from 'features/Modal'
import { Header as BaseHeader } from 'features/PopupComponents'

import { ButtonSolid, ButtonOutline } from 'features/Common'

export const Modal = styled(BaseModal)`
  background-color: rgba(0, 0, 0, 0.7);

  ${ModalWindow} {
    max-width: 642px;
    max-height: 340px;
    padding-top: 40px;
    background-color: #333333;
    border-radius: 5px;

    ${isMobileDevice
    ? css`
        height: auto;
        top: -7vh;
        width: 98%;
        max-height: none;
        padding: 0;
    `
    : ''};
  }
`

type WrapperProps = {
  isFetching?: boolean,
}

export const Wrapper = styled.div<WrapperProps>`
  ${({ isFetching }) => (
    isFetching
      ? css`pointer-events: none;`
      : ''
  )}
`

export const Header = styled(BaseHeader)`
  height: auto;
  justify-content: center;
  ${isMobileDevice
    ? css`
      @media ${devices.mobile}{
        padding-top: 33px;
      }
    `
    : ''};
`

export const HeaderTitle = styled.span`
  font-weight: 700;
  font-size: 24px;
  line-height: 24px;
  color: #FFFFFF;
  ${isMobileDevice
    ? css`
        font-size: 14px;
        line-height: 20px;

      @media (orientation: landscape) {
        font-size: 20px;
      }
    `
    : ''};
`

export const Body = styled.div`
  padding: 20px 40px;
  display: flex;
  flex-direction: column;
  font-weight: normal;
  font-size: 20px;
  line-height: 27px;
  ${isMobileDevice
    ? css`
        padding: 13px 25px 0;
        flex-direction: column;

      @media (orientation: landscape){
        padding: 22px 23px 0 29px;
      }
    `
    : ''};
`

export const Footer = styled.div`
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 25px;

  ${isMobileDevice
    ? css`
        flex-direction: column;
    `
    : ''};
`

export const ScSaveSubBtn = styled(ButtonSolid)`
  max-width: 270px;
  border-radius: 5px;
  font-weight: 600;
  height: 50px;
  font-size: 20px;
  ${isMobileDevice
    ? css`
        max-width: none;
        width: 100%;
        min-height: 42px;
        margin-bottom: 20px;
      
      @media (orientation: landscape){
        width: 290px;
        min-height: 42px;
      }
    `
    : ''};
`

export const ScStillCancelBtn = styled(ButtonOutline)<{isFetching: boolean}>`
  max-width: 270px;
  height: 50px;
  border-radius: 5px;
  font-weight: 500;
  font-size: 20px;
  margin-right: 24px;

  ${({ isFetching }) => (isFetching ? 'border: none' : '')};
  
  ${isMobileDevice
    ? css`
      max-width: none;
      margin-bottom: 20px;
      width: 100%;
      
      @media (orientation: landscape){
        width: 290px;
      }
    `
    : ''};
`

export const Text = styled.span`
  display: block;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;

  ${isMobileDevice
    ? css`
      font-size: 13px;
    `
    : ''};
`

export const ScCancelSub = styled.div`
  max-width: 562px;
  height: 59px;
  background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.1) 0%,
      rgba(255, 255, 255, 0) 100%
    ),
    #3f3f3f;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
  border-radius: 2px;
  font-weight: 500;
  font-size: 18px;
  line-height: 22px;
  padding: 20px;
  margin: 20px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
`

export const ScNotificationPopup = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
`

export const ScOkBtn = styled(ScSaveSubBtn)`
  max-width: 70px;
  margin-top: 40px;
`
