import { styled } from 'styleh-components'
import { Heading } from 'atoms/Text'
import { OneObserverForm } from '@skava/forms/build/dist/src/new-forms/OneForm/OneForm'
import { EmailPlugin } from '@skava/forms/build/dist/src/new-forms/plugins/EmailPlugin'
import { StyledInput } from '@skava/forms/build/dist/src/new-forms/inputs'
import { PrimaryButton } from 'presets/Buttons'
import { Button, ButtonLabel } from '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.withComponent(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.withComponent(PrimaryButton)`
  width: rem(194);
  color: #fff;
  font-size: rem(18);
  text-transform: capitalize;
  user-select: none;
  ${ButtonLabel} {
    margin: 0;
    font-weight: 500;
  }
  @tablet-or-larger() {
    margin-top: rem(8);
  }
  @phone-or-smaller() {
    width: 100%;
  }
`

const StyledForm = styled.withComponent(OneObserverForm)`
  display: flex;
  margin: auto;
  justify-content: center;
  flex-wrap: wrap;
  ${StyledInput} {
    width: 100%;
    text-align: center;
  }
  ${StyledPrimaryButton}{
    background: #1b75bc;
    margin: 0;
  }
  @phone-or-smaller() {
    width: 100%;
  }
`
const StyledEmailPlugin = styled.withComponent(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;
  }
`

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