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 { client } from 'features/AuthServiceApp/config/clients'

import { ButtonSolid } from 'features/Common'

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

  ${ModalWindow} {
    max-width: 757px;
    min-height: 414px;
    padding-top: 60px;
    background-color: #333333;
    border-radius: 5px;

    @media (max-width: 1370px) {
      width: 70rem;
      height: auto;
    }


    ${isMobileDevice
    ? css`
      @media ${devices.mobile}{
        height: auto;
        top: -7vh;
      }
    `
    : ''};
  }
`

type WrapperProps = {
  isFetching?: boolean,
}

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

export const Header = styled(BaseHeader)`
  display: flex;
  flex-direction: column;
  align-items: center;
  height: auto;
  justify-content: center;
  gap: 30px;
  ${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`
      @media ${devices.mobile}{
        font-size: 14px;
        line-height: 20px;
      }

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

export const Body = styled.div`
  padding: 25px 94px 0 78px;
  display: flex;
  flex-direction: column;
  font-weight: normal;
  font-size: 20px;
  line-height: 27px;
  ${isMobileDevice
    ? css`
      @media ${devices.mobile}{
        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;
  padding: 1.89rem;
  ${isMobileDevice
    ? css`
      @media ${devices.mobile}{
        flex-direction: column;
        padding: 20px 25px 20px;
      }
    `
    : ''};
`

export const ApplyButton = styled(ButtonSolid)`
  width: 270px;
  border-radius: 5px;
  font-weight: 600;
  margin-right: 24px;
  width: 134px;
  height: 50px;
  font-size: 20px;
  ${isMobileDevice
    ? css`
      @media ${devices.mobile}{
        width: 100%;
        min-height: 42px;
        margin-bottom: 20px;
      }
      
      @media (orientation: landscape){
        width: 290px;
        min-height: 42px;
      }
    `
    : ''};
  ${client.styles.popupApplyButton}
`

export const Text = styled.span`
  margin-bottom: 20px;
`