@import url('https://fonts.googleapis.com/css?family=Lato:300,400')

$bg = #6c7a89
$appWhite = #ecf0f1
$appAccent = #a7dde9
$textColor = #707070
$borderColor = lighten(#b5c5c9, 50%)
$textColorSecondary = #7e7e7e
$animDuration = .15s

:root
  --accent $appAccent

*
  box-sizing border-box
  outline 0

html
body
  align-items      center
  background       linear-gradient(45deg, #f39c12, #913d88)
  color $textColor
  display          flex
  flex-direction    column
  font-size        16px
  font-family 'Lato', sans-serif
  justify-content  center
  margin           0
  overflow          auto
  padding          0
  width            100vw
  min-height       100vh

label
  color $textColor

input
label
  cursor pointer

input[type="color"]
  height 40px
  width 40px
  border 0
  margin-right 10px

form
  width 100%
  padding 0 10px 10px
  display flex
  flex-direction column
  margin 0

  input
  textarea
    border-radius 4px
    border 0
    margin-bottom 4px
    padding 4px 12px
    font-family 'Lato', sans-serif
    width 100%
    line-height 30px

    &::placeholder
      color #c3c3c3

  textarea
    flex 1
    resize none

button
  background-color var(--accent)
  cursor pointer
  border 0
  display flex
  justify-content center
  align-items center

.blanket
  background-color $appAccent
  z-index 10
  position absolute
  top 0
  right 0
  bottom 0
  left 0

  &:after
    box-sizing border-box
    content ''
    height 50px
    width 50px
    border 5px solid white
    border-radius 100%
    border-left-color transparent
    border-right-color transparent
    position absolute
    top 50%
    left 50%
    margin-left -25px
    margin-top -25px
    animation rotate .5s infinite linear


.mail-screen-content
  // padding 10px
  padding-left 10px
  width 100%
  height 100%
  overflow auto
  position relative

.icon
  fill $appWhite
  position absolute
  height 24px
  width 24px

  &:hover
    fill darken($appWhite, 2%)


#app
  height 100vh
  width 100vw
  position relative
  background-color var(--accent)
  overflow hidden

  @media(min-width 768px)
    height 480px
    width 320px

.mail-inbox
  height 100%
  background-color $appWhite

.mail-settings
  height 100%
  width 100%
  background-color $appWhite
  position absolute
  top 0
  left 0
  z-index 3

  &__setting
    display flex
    flex-direction row
    align-items center

.mail-close
  position absolute
  left 0
  height 50px
  width 50px

.mail-header__title
  margin 0
  padding 0
  line-height 50px
  font-size 1.2rem
  color $appWhite
  flex 1
  text-align left
  padding-left 54px

.mail-messages
.fake-messages
  background $appWhite
  padding 0
  margin 0
  list-style none
  overflow auto
  position absolute
  top 50px
  left 0
  right 0
  bottom 0
  padding-bottom 50px

.fake-messages
  bottom auto
  z-index 2
  top auto
  padding 0


/**
  * Mail messages should animate on first load
*/
.mail-messages--load
  .mail-message
    opacity 0
    animation fadeIn $animDuration ease 0s
    animation-fill-mode forwards

  for $message in (1..15)
    li:nth-child({$message})
      button
        animation-delay ($message * .1s)


.mail-screen-header
  background-color var(--accent)
  position relative
  height 50px
  display flex
  align-items center
  justify-content flex-end
  overflow hidden
  width 100%

  button:first-child
    position absolute
    left 0

  &--fake
    z-index 3

/**
  * Message styling
*/
.mail-message--focus .mail-message__info
  height 60px
  padding-right 0

  .mail-message__subject
    white-space pre-wrap

.mail-container
  background $appWhite
  position absolute
  top 0
  right 0
  bottom 0
  left 0

  &__header
    position absolute
    top 0

  &__message-header
    padding 10px 0 10px 10px
    top 0

    .mail-message__avatar
      height 50px
      width 50px
    .mail-message__subject
      overflow visible
      white-space initial
      overflow initial
      font-weight bolder
      font-size 1.25rem
    .mail-message__sender
      font-size 0.75rem
    .mail-message__timestamp
      transform translateY(-20px)

button.mail-message
  padding 0
  padding-left 10px

  &:hover
    background-color darken($appWhite, 2%)

.mail-message
  background-color $appWhite
  height 60px
  width 100%

  &__action
    height 50px
    width 50px

  &--opening
  &--open
    position absolute
    z-index 3
    border 0


  &__header
    display flex
    flex-direction row
    align-items center
    min-height 60px
    position absolute
    width 100%
    padding-left 10px
    background $appWhite
    top 50px

  &__content
    overflow auto

  &__message
    color $textColorSecondary
    font-weight 300
    padding 0 10px 50px 10px
    opacity 0
    overflow auto
    position absolute
    top 100%

  &__avatar
    height 34px
    width  34px
    background-color var(--accent)
    border-radius 100%
    overflow hidden

  &__info
    display flex
    flex-direction column
    align-items flex-start
    flex 1
    padding-left 10px
    min-height 60px
    justify-content center
    padding-right 60px
    position relative
    overflow hidden

  &__timestamp
    height 50px
    width 50px
    position absolute
    right 10px
    top 5px
    font-size 0.75rem
    display flex
    align-items center
    justify-content center
    color $textColor

  &__sender
    font-size 1rem
    font-weight 400
    color $textColor

  &__subject
    font-size .75rem
    font-weight 300
    color $textColorSecondary
    white-space nowrap
    text-overflow ellipsis
    overflow hidden
    width 100%
    text-align left



.mail-compose-button
  height 44px
  width 44px
  background-color var(--accent)
  border-radius 100%
  border 0
  cursor pointer
  bottom 10px
  right 10px
  position absolute
  z-index 2
  box-shadow 0 2px 2px #c3c3c3


.mail-composer
  height 44px
  width 44px
  border-radius 100%
  border none
  position absolute
  bottom 10px
  right 10px
  transform-origin bottom right
  background-color var(--accent)
  display flex
  flex-direction column
  z-index 4

.mail-open
  height 50px
  width 50px
  position absolute
  top 50%
  left 50%
  margin-left -25px
  margin-top -25px
  border-radius 100%
  border 5px solid $appWhite
  animation pulse 4s infinite ease
  background-color var(--accent)

  .icon:hover
    fill $appWhite


@keyframes pulse
  0%, 100%
    transform scale(1)
    box-shadow 0px 2px 2px black
  50%
    transform scale(1.05)
    box-shadow 0px 4px 4px black

@keyframes fadeIn
  from
    opacity 0
  to
    opacity 1

@keyframes rotate
  to
    transform rotate(360deg)

const ANIMATION_DURATION = 0.25
const CLASSES = {
  COMPOSER: 'mail-composer',
  HEADER: 'mail-screen-header',
  SETTINGS: 'mail-settings',
}
let messages = []
for (let i = 0; i < 15; i++) {
  messages.push({
    from: {
      avatar: faker.image.avatar(),
      name: faker.name.findName(),
    },
    received: moment(faker.date.recent()),
    subject: faker.company.bs(),
    message: faker.lorem.paragraphs(Math.floor(Math.random() * 10 + 2)),
  })
}
messages = messages.sort((a, b) => a.received.diff(b.received)).reverse()

for (let message of messages) {
  if (message.received.isAfter(moment().subtract(5, 'hours'))) {
    message.received = message.received.format('HH:mm')
  } else {
    message.received = message.received.format('D MMM')
  }
}

const app = new Vue({
  el: '#app',
  data: {
    theme: '#a7dde9',
    openingComposer: false,
    closingComposer: false,
    composerOpen: false,
    messageOpen: false,
    activeMessage: undefined,
    activeMessageIndex: undefined,
    fakeOnePos: undefined,
    fakeTwoPos: undefined,
    messageTop: undefined,
    mailOpened: false,
    openingSettings: false,
    closingSettings: false,
    settingsOpen: false,
    loaded: false,
    messages: [],
  },
  mounted: function() {
    this.loaded = true
  },
  methods: {
    openComposer: function() {
      this.openingComposer = !this.openingComposer
      this.$nextTick(() => {
        const composer = document.querySelector(`.${CLASSES.COMPOSER}`)
        const composerTl = new TimelineMax({
          onComplete: () => {
            this.openingComposer = false
            this.composerOpen = true
            this.mailOpened = true
          },
        })
        composerTl.add(
          TweenMax.to(composer, ANIMATION_DURATION, {
            right: 0,
            bottom: 0,
            height: '100%',
            width: '100%',
            borderRadius: 0,
          })
        )
      })
    },
    closeComposer: function() {
      this.closingComposer = !this.closingComposer
      const composer = document.querySelector(`.${CLASSES.COMPOSER}`)
      const composerTl = new TimelineMax({
        onComplete: () => {
          this.composerOpen = false
          this.closingComposer = false
        },
      })
      composerTl.add(
        TweenMax.to(composer, ANIMATION_DURATION, {
          bottom: 10,
          right: 10,
          height: 44,
          width: 44,
          borderRadius: '100%',
        })
      )
    },
    openInbox: function() {
      this.messages = messages
    },
    closeInbox: function() {
      this.messages = []
      this.mailOpened = false
    },
    closeMessage: function() {
      TweenMax.to(this.$refs.mailContainer, ANIMATION_DURATION, {
        onComplete: () => {
          this.activeMessage = null
          this.activeMessageIndex = null
          this.messageOpen = false
        },
        x: '-100%',
      })
    },
    openMessage: function(message, idx) {
      const el = document.getElementById(`message--${idx}`)
      const list = document.querySelector('.mail-messages--main')
      const header = document.querySelector(`.${CLASSES.HEADER}`)
      this.mailOpened = true
      this.activeMessage = message
      this.activeMessageIndex = idx
      this.fakeTwoPos =
        el.offsetTop + el.offsetHeight + header.offsetHeight - list.scrollTop
      this.messageTop = el.offsetTop + header.offsetHeight - list.scrollTop
      this.fakeOnePos = list.offsetHeight - el.offsetTop + list.scrollTop
      this.$nextTick(() => {
        const el = document.querySelector('.mail-message--opening')
        const {
          fakeTop,
          fakeBottom,
          fakeHeader,
          mailHeader,
          mailAvatar,
          mailSubject,
          mailSender,
          mailTimestamp,
          mailContainer,
          mailContent,
        } = this.$refs
        const fakeHeaderPos = fakeHeader.getBoundingClientRect()
        const mailHeaderPos = mailHeader.getBoundingClientRect()
        const mailContainerPos = mailContainer.getBoundingClientRect()
        const openTl = new TimelineMax({
          onComplete: () => {
            this.messageOpen = true
          },
        })
        openTl
          // Move fakes out of the way
          .to(fakeHeader, ANIMATION_DURATION, { y: `-${this.messageTop}px` }, 0)
          .to(fakeTop, ANIMATION_DURATION, { bottom: '100%' }, 0)
          .to(fakeBottom, ANIMATION_DURATION, { top: '100%' }, 0)
          // Move header to top and change sizing
          .to(
            mailHeader,
            ANIMATION_DURATION,
            { y: `-${this.messageTop - fakeHeaderPos.height}`, paddingTop: 10 },
            0
          )
          .from(
            mailAvatar,
            ANIMATION_DURATION,
            { height: '34px', width: '34px' },
            0
          )
          .from(
            mailTimestamp,
            ANIMATION_DURATION,
            { fontSize: '0.75rem', y: 0 },
            0
          )
          .from(
            mailSubject,
            ANIMATION_DURATION,
            {
              overflow: 'hidden',
              fontSize: '0.75rem',
              fontWeight: '400',
              color: '#7e7e7e',
            },
            0
          )
          .from(mailSender, ANIMATION_DURATION, { fontSize: '1rem' }, 0)
          // Animate in the article
          .to(
            mailContent,
            ANIMATION_DURATION,
            {
              height: `${mailContainerPos.height -
                (mailHeaderPos.height + fakeHeaderPos.height)}px`,
              opacity: 1,
              y: `-${mailContainerPos.height -
                (mailHeaderPos.height + fakeHeaderPos.height)}px`,
            },
            0
          )
      })
    },
    openSettings: function() {
      this.openingSettings = !this.openingSettings
      this.$nextTick(() => {
        const el = document.querySelector(`.${CLASSES.SETTINGS}`)
        TweenMax.from(el, ANIMATION_DURATION, {
          onComplete: () => {
            this.openingSettings = false
            this.settingsOpen = true
          },
          x: '100%',
        })
      })
    },
    closeSettings: function() {
      const el = document.querySelector(`.${CLASSES.SETTINGS}`)
      TweenMax.to(el, ANIMATION_DURATION, {
        onComplete: () => {
          this.openeingSettings = false
          this.settingsOpen = false
        },
        x: '100%',
      })
    },
    updateTheme: function(e) {
      this.theme = e.target.value
      document.documentElement.style.setProperty('--accent', e.target.value)
    },
  },
})