import { styled } from 'styleh-components'
import { Heading } from '@skava/ui/dist/components/atoms/Text'
import { OneObserverForm } from '@skava/forms/build/dist/exports'
import { EmailPlugin } from '@skava/forms/build/dist/new-forms/plugins/EmailPlugin'
import { StyledInput } from '@skava/forms/build/dist/exports'
import { PrimaryButton } from 'presets/Buttons'
import { ButtonText } from '@skava/ui/dist/components/atoms/Button'

const Wrapper = styled.div `
  max-width: rem(1024);
  margin: 0 auto;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  text-align: center;
`

const StyledTitle = styled(Heading) `
  font-size: rem(24);
  margin: 0 0 rem(16) 0;
  font-weight: 500;
  color: var(--color-black);
  @tablet-or-smaller() {
    font-size: rem(20);
  }
  @phone-or-smaller() {
    font-size: rem(16);
  }
`
const StyledPrimaryButton = styled(PrimaryButton) `
  width: rem(194);
  color: #fff;
  font-size: rem(18);
  text-transform: capitalize;
  user-select: none;
  ${ButtonText} {
    color: #fff;
    margin: 0;
    font-weight: 500;
  }
  @tablet-or-larger() {
    margin-top: rem(8);
  }
  @phone-or-smaller() {
    width: 100%;
  }
`

const StyledForm = styled(OneObserverForm) `
  display: flex;
  margin: auto;
  justify-content: center;
  flex-wrap: wrap;
  ${StyledInput} {
    width: 100%;
    background-color: #ffffff;
    text-align: center;
  }
  ${StyledPrimaryButton} {
    background: #1b75bc;
    margin: 0;
  }
  @phone-or-smaller() {
    width: 100%;
  }
`
const StyledEmailPlugin = styled(EmailPlugin) `
  width: rem(394);
  padding: 0;
  margin: 0 rem(8) 0 0;
  @tablet-or-smaller() {
    width: rem(310);
  }
  @phone-or-smaller() {
    width: 100%;
    margin: 0;
  }
  label {
    color: #535353;
  }
`

export {
  Wrapper,
  StyledTitle,
  StyledPrimaryButton,
  StyledForm,
  StyledEmailPlugin,
}