import * as React from 'react'
import { action } from 'mobx'
import { observer, inject } from 'mobx-react'
import styled from 'styled-components'
import { observable } from 'mobx'

import { StaticPlaceholderInput } from '~/components/common'
// import { Field, Input, StaticPlaceholderInput } from '~/components/common'
import { PrimaryBtn, PrimaryBtnSize, ArrowLink } from '~/components/pru'
import { STORE_AUTH, STORE_ENTITIES } from '~/constants/stores'
// import { building } from '~/types'
import { MEDIA } from '~/constants/media-queries'
import {
  MAIN_TEXT,
  // BLUE,
  // PLACEHOLDER,
  // DARK_LINES,
  EXTRA_TEXT,
  PAGE_BG
} from '~/components/pru/ui-colors'
import { IAccountProps } from './account.d'
import { SELECT_ACCOUNT } from '~/constants/links'

const Wrapper = styled.section`
  width: 476px;
  /* margin-top: -48px; */
  /* text-align: center; */
  /* display: flex;
  flex: 1; */
  /* margin-top: -70px; */
  padding-top: 24px;
  padding-bottom: 50px;

  @media ${MEDIA.untilTablet} {
    width: 100%;
    /* padding-left: 20px;
    padding-right: 20px; */
    margin-top: 0;
    background-color: #fff;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
  }
`

// const Content = styled.div`

//   @media ${MEDIA.untilTablet} {
//     /* margin-top: 0;
//     text-align: left;
//     margin-bottom: 14px; */
//   }
// `

const Heading = styled.h1`
  color: ${MAIN_TEXT};
  font-size: 30px;
  font-weight: normal;
  margin: 0;
  margin-bottom: 3px;
  text-align: center;

  @media ${MEDIA.untilTablet} {
    margin-top: 0;
    text-align: left;
    margin-bottom: 4px;
    font-size: 26px;
  }
`

const Description = styled.p`
  color: ${EXTRA_TEXT};
  text-align: center;
  margin-bottom: 20px;
  font-size: 16px;
  color: #6c6c6c;

  @media ${MEDIA.untilTablet} {
    margin-top: 0;
    text-align: left;
    margin-bottom: 30px;
  }
`

const Form = styled.form`
  background-color: #fff;
  padding: 39px 52px 25px 52px;
  border-radius: 4px;
  box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.04);
  padding-bottom: ${(props: IAccountProps) => (props.firstAccount ?
    `40px` : ``)};

  @media ${MEDIA.untilTablet} {
    padding: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
  }
`

const Field = styled.div`
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 500;
  font-style: normal;
  line-height: 1;
  letter-spacing: 0.8px;
  position: relative;
  color: ${EXTRA_TEXT};

  &:not(:last-child) {
    margin-bottom: 27px;
  }

  @media ${MEDIA.untilTablet} {
    &:not(:last-child) {
      margin-bottom: 25px;
    }
  }
`

const SendBtn = styled(PrimaryBtn)`
  width: 100%;
  max-width: none;
`

const FormContent = styled.div`
  margin-bottom: 29px;

  @media ${MEDIA.untilTablet} {
    padding-left: 20px;
    padding-right: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
  }
`

const FormFooter = styled.footer`
  width: 100%;
  text-align: center;

  @media ${MEDIA.untilTablet} {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 24px;
    background-color: ${PAGE_BG};
    padding-bottom: 28px;
  }
`

const PageHeader = styled.div`
  padding-left: 20px;
  padding-right: 20px;
`

const ReverseArrowLink = styled(ArrowLink)`
  margin-top: 17px;
  margin-left: -21px;

  @media ${MEDIA.untilTablet} {
    font-size: 16px;
  }
`

@inject(STORE_AUTH, STORE_ENTITIES)
@observer
export default class PageAddAccount extends React.Component<IAccountProps> {
  building = ''
  premise = ''
  number = ''
  @observable value = ''

  static defaultProps = {
    firstAccount: false
  }

  constructor(props: React.Props<{}>) {
    super(props)

    this.handleSubmit = this.handleSubmit.bind(this)
    this.handleAutocompleteClick = this.handleAutocompleteClick.bind(this)
    this.handleInputChange = this.handleInputChange.bind(this)
  }

  handleSubmit(e: React.FormEvent<{}>) {
    e.preventDefault()
    const store = this.props[STORE_ENTITIES]

    if (!store) return

    const newAccount = {
      _type: 'account',
      _uid: 'fake',
      _fake: true,
      building: this.building,
      premise: this.premise,
      number: this.number
    }

    store.createEntity(newAccount, { sync: true, log: true })
  }

  @action
  handleAutocompleteClick({ target }: React.ChangeEvent<HTMLSelectElement>) {
    this.building = target.value
  }

  @action.bound
  handleInputChange(event: React.ChangeEvent<HTMLInputElement>) {
    this.value = event.target.value
  }

  render() {
    // const { [STORE_ENTITIES]: store } = this.props
    // if (!store) return
    const { firstAccount } = this.props
    console.log('323', firstAccount)

    return (
      <Wrapper>
        <PageHeader>
          { firstAccount ? <Heading>Личный кабинет</Heading> : <Heading>Добавление адреса</Heading>}
          <Description>
            Добавьте адрес помещения (квартиры, офиса, паркинга) обслуживаемого
            УК&nbsp;&laquo;ПИК&ndash;Комфорт&raquo;.
          </Description>
        </PageHeader>
        <Form onSubmit={this.handleSubmit} firstAccount={firstAccount}>
          <FormContent>
            <Field>
              Адрес
              <StaticPlaceholderInput
                placeholder="Найти адрес"
                name="address"
                onChange={this.handleInputChange}
                value={this.value}
              />
            </Field>
            <Field>
              Номер квартиры
              <StaticPlaceholderInput
                placeholder="Введите номер квартиры"
                name="number"
                type="number"
              />
            </Field>
            <Field>
              Номер Лицевого счета
              <StaticPlaceholderInput
                placeholder="9 или 12 цифр, указан в квитанции"
                name="accountNumber"
                type="number"
              />
            </Field>
          </FormContent>
          <FormFooter>
            <SendBtn size={PrimaryBtnSize.LARGE}>Подтвердить</SendBtn>
            { !firstAccount && <ReverseArrowLink reverse={true} link={SELECT_ACCOUNT}>
            Вернуться назад
    </ReverseArrowLink> }
          </FormFooter>
        </Form>
      </Wrapper>
    )
  }
}