import * as React from 'react'
import styled from 'styled-components'
import * as moment from 'moment'
import { observable } from 'mobx'

import { PrimaryBtn } from '~/components/pru'
import {
  BLUE,
  EXTRA_TEXT,
  LIGHT_LINES,
  STATIC_SHADOW
} from '~/components/pru/ui-colors'
import { SecondaryBtn } from '~/components/pru'
import { MEDIA } from '~/constants/media-queries'
import { BASE_METERS } from '~/constants/links'
import { DEADLINE_DAY_METERS } from '~/constants/content'
import { IIncomingDataProps } from './ClientStatement.d'

const Statement = styled.div`
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  max-width: 312px;
  background-color: #fff;
  box-shadow: ${STATIC_SHADOW};
  text-align: center;

  @media ${MEDIA.untilTablet} {
    max-width: 100%;
    height: auto;
  }
`
const StatementContent = styled.div`
  flex: 1;
  padding: 23px 40px 23px;

  @media ${MEDIA.untilTablet} {
    padding: 16px 24px 18px;
  }
`

const StatementTitle = styled.h2`
  margin-top: 0;
  margin-bottom: 2px;
  color: ${BLUE};
  font-size: 26px;
  font-weight: normal;
  line-height: 1.15;
`
const StatementDate = styled.time`
  display: block;
  margin-bottom: 12px;
  font-size: 18px;
  line-height: 1.06;

  @media ${MEDIA.untilTablet} {
    margin-bottom: 10px;
  }
`

const StatementFooter = styled.div`
  padding: 14px 30px 16px 15px;
  border-top: 1px solid ${LIGHT_LINES};
  color: ${EXTRA_TEXT};
  font-size: 14px;

  @media ${MEDIA.untilTablet} {
    padding: 14px 24px 16px;
  }
`

const StatementFooterText = styled.p`
  display: inline-block;
  margin: 0;
  padding-left: 25px;
  line-height: 1.29;
  background-image: url(${require('./img/ic_info.svg')});
  background-position: left center;
  background-repeat: no-repeat;
`

export default class ClientStatement extends React.PureComponent<
  IIncomingDataProps
> {
  monthEvidencePost = true

  @observable lastMeterReadingDate = '2018-02-02'

  get deadlineDate() {
    return moment(this.lastMeterReadingDate)
      .date(DEADLINE_DAY_METERS)
      .add(1, 'month')
      .format('DD MMMM')
  }

  renderFooter() {
    const { isReadingsReady } = this.props
    this.monthEvidencePost = !isReadingsReady

    if (this.monthEvidencePost) {
      return (
        <StatementFooter>
          <StatementFooterText>
            Период сдачи: 20 &ndash;{' '}
            {moment(this.deadlineDate, 'DD MMMM')
              .date(DEADLINE_DAY_METERS)
              .format('DD MMMM')}
          </StatementFooterText>
        </StatementFooter>
      )
    } else {
      return (
        <StatementFooter>
          <StatementFooterText>
            Учётный период: 20 &ndash;{' '}
            {moment(this.deadlineDate, 'DD MMMM')
              .date(DEADLINE_DAY_METERS)
              .format('DD MMMM')}
          </StatementFooterText>
        </StatementFooter>
      )
    }
  }

  render() {
    const { isReadingsReady } = this.props
    this.monthEvidencePost = !isReadingsReady

    if (this.monthEvidencePost) {
      return (
        <Statement>
          <StatementContent>
            <StatementTitle>Сдайте показания</StatementTitle>
            <StatementDate>
              за {moment(this.deadlineDate, 'DD MMMM').format('MMMM YYYY')}
            </StatementDate>
            <PrimaryBtn link={BASE_METERS}>Сдать показания</PrimaryBtn>
          </StatementContent>
          {this.renderFooter()}
        </Statement>
      )
    } else {
      return (
        <Statement>
          <StatementContent>
            <StatementTitle>Показания сданы</StatementTitle>
            <StatementDate>
              {moment(this.lastMeterReadingDate, 'DD MMMM').format(
                'DD MMMM YYYY'
              )}
            </StatementDate>
            <SecondaryBtn link={BASE_METERS}>Изменить показания</SecondaryBtn>
          </StatementContent>
          {this.renderFooter()}
        </Statement>
      )
    }
  }
}