<template>
  <v-layout row wrap>
    <v-flex :class="fieldClass">
      <b>Participants</b>
    </v-flex>
    <v-flex :class="contentClass">
      <v-input
        class="static-field user-chips text-xs-left"
        prepend-icon="edit">
        <div>
          <v-tooltip v-for="(user, userType) in users" :key="userType" top>
            <v-chip slot="activator">
              <v-avatar>
                <img :src="user.profile" class="participants-avatar">
              </v-avatar>
              <b>{{ userType }}</b>&nbsp; {{ user.username }}
            </v-chip>
            <span>{{ user.email }}</span>
          </v-tooltip>
        </div>
      </v-input>
    </v-flex>
  </v-layout>
</template>

<script>
import { profileUrl } from '@/utils/helpers'

export default {
  name: 'UserBaseStaticField',
  props: {
    participants: {
      type: Object,
      default: () => {}
    },
    size: {
      type: String,
      default: 'large',
      validator: value => ['small', 'large'].includes(value)
    }
  },
  computed: {
    users () {
      const users = {}
      Object.keys(this.participants).map(userType => {
        users[userType] = this.parseParticipant(this.participants[userType])
      })
      return users
    },
    fieldClass () {
      return this.size === 'large' ? 'md2' : 'md4'
    },
    contentClass () {
      return this.size === 'large' ? 'md10' : 'md8'
    }
  },
  methods: {
    parseParticipant (email) {
      return {
        profile: profileUrl({ email }),
        username: email.split('@')[0],
        email
      }
    }
  }
}
</script>

<style lang="scss">
.user-chips.v-input {
  .v-input__control {
    margin-top: -9px;
  }
  .v-chip {
    height: 20px;
    padding: 0 12px;
    margin-right: 8px;
    margin-left: 0px;
    .v-avatar {
      height: 26px !important;
      width: 26px !important;
      min-width: 26px !important;
    }
    span {
      padding: 0
    }
  }
}
</style>
