<template>
  <account-card :tabs="accountCardTabs"
                :value="value"
                :tab="tab"
                v-bind="$attrs"
                v-on="$listeners">
    <template #wallets="value">
      <my-wallets :value="value"/>
    </template>
    <template #accounts="value">
      <div :style="{display: 'flex', 'flex-wrap': 'wrap', 'flex-direction': $q.screen.lt.sm ? 'column' : undefined}">
        <div style="flex: 1;">
          <div style="text-align: center; font-size: 2.1em;">Owners</div>
          <owners :value="value"/>
        </div>

        <div class="q-px-md">
          <q-separator vertical style="height: 100%;"/>
        </div>

        <div style="flex: 1;">
          <div style="text-align: center; font-size: 2.1em;">Members</div>
          <members :value="value"/>
        </div>
      </div>
    </template>
    <template #qb_connections="value">
      <div style="text-align: center; font-size: 2.1em;">Quickbook Connections</div>
      <companies-list :value="value"/>
    </template>

    <template #addresses="value">
      <account-addresses :value="value"/>
    </template>

    <template #phone-numbers="value">
      <account-phones :value="value"/>
    </template>

    <template #social-links="value">
      <account-social-links :value="value"/>
    </template>
  </account-card>
</template>

<script>
  import AccountCard from './accounts/AccountCard';
  import MyWallets from '../banks/MyWallets';
  import Owners from './accounts/Owners';
  import Members from './accounts/Members';
  import CompaniesList from './companies/CompaniesList';
  import AccountPhones from './accounts/AccountPhones';
  import AccountSocialLinks from './accounts/AccountSocialLinks';
  import AccountAddresses from './accounts/AccountAddresses';

  export default {
    name: 'AccountProfile',
    components: {
      AccountAddresses,
      AccountSocialLinks,
      AccountPhones,
      CompaniesList,
      Members,
      Owners,
      MyWallets,
      AccountCard,
    },
    props: {
      value: {
        type: Object,
        required: true,
      },
      tab: {
        type: String,
      },
    },
    data() {
      return {
        accountCardTabs: [
          {
            name: 'wallets',
            label: 'Wallets',
            icon: 'fas fa-wallet',
          },
          {
            name: 'accounts',
            label: 'Accounts',
            icon: 'mdi-account-circle',
          },
          {
            name: 'qb_connections',
            label: 'Quickbook Connections',
            icon: 'fas fa-building',
          },
          {
            name: 'addresses',
            label: 'Addresses',
            icon: 'fas fa-location-arrow',
          },
          {
            name: 'phone-numbers',
            label: 'Phone Numbers',
            icon: 'fas fa-phone-alt',
          },
          {
            name: 'social-links',
            label: 'Social Links',
            icon: 'fab fa-instagram',
          },
        ],
      };
    },
  };
</script>

<style scoped>

</style>
