<template>
  <div class="chat-main" :style="rootStyles">
    <div class="outer">
      <slot name="header"></slot>

      <div :class="`cnt-sec ${screen}`">
        <slot></slot>
        <div class="ft-sec" v-if="showPoweredBy">
          <span class="text">Powered by</span>
          <span> <img :src="LogoBuyercallIcon" /></span>
        </div>
      </div>
      <div class="btn-sec" v-if="bottomTabs.length">
        <div class="fot">
          <button
            :class="{
              links: true,
              active: rootState.bottomTabSelectedOption === bottomTab.name,
            }"
            v-for="(bottomTab, index) in bottomTabs"
            :key="index"
            @click="selectBottomTab(bottomTab.name)"
            :style="bottomLinkStyle(bottomTab.name)"
          >
            <img :src="bottomTab.icon" />
          </button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import InfoIcon from '../../../../styles/2021-theme/images/comm_widget/info.png';
import TimeIcon from '../../../../styles/2021-theme/images/comm_widget/time.png';
import ShakeIcon from '../../../../styles/2021-theme/images/comm_widget/shake.png';
import MnyIcon from '../../../../styles/2021-theme/images/comm_widget/mny.png';
import LogoBuyercallIcon from '../../../../styles/2021-theme/images/comm_widget/logo_buyercall.png';
import {
  ROOT_SELECT_WIDGET_POSITION,
  ROOT_SELECT_IS_MOBILE_VIEW,
  ROOT_SELECT_SHOW_POWEREDBY_BC,
  ROOT_SELECT,
  ROOT_ACTION_SELECT_BOTTOM_TAB,
  ROOT_SELECT_WIDGET_THEME_COLOR_SHADE,
} from '../constants';
import { mapGetters, mapActions } from 'vuex';
import * as _ from 'lodash';
export default {
  props: {
    screen: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      InfoIcon,
      TimeIcon,
      ShakeIcon,
      MnyIcon,
      LogoBuyercallIcon,
    };
  },
  computed: {
    ...mapGetters('root', {
      position: ROOT_SELECT_WIDGET_POSITION,
      showPoweredBy: ROOT_SELECT_SHOW_POWEREDBY_BC,
      rootState: ROOT_SELECT,
      themeColorShade: ROOT_SELECT_WIDGET_THEME_COLOR_SHADE,
      isMobileView: ROOT_SELECT_IS_MOBILE_VIEW,
    }),

    bottomTabs() {
      const validOptions = [
        {
          name: 'financing',
          icon: InfoIcon,
        },
        {
          name: 'hours',
          icon: TimeIcon,
        },
        {
          name: 'map',
          icon: MnyIcon,
        },
        {
          name: 'trade',
          icon: ShakeIcon,
        },
      ];
      return _.filter(validOptions, ({ name: validOptionName }) =>
        _.includes(
          _.map(this.rootState.bottomTabOptions, ({ name }) => name),
          validOptionName,
        ),
      );
    },
    rootStyles() {
      if (this.isMobileView) {
        return {};
      }
      if (this.position === 'LEFT') {
        return {
          left: '35px',
        };
      }
      return {
        right: '35px',
      };
    },
  },
  methods: {
    ...mapActions('root', {
      selectBottomTab: ROOT_ACTION_SELECT_BOTTOM_TAB,
    }),
    bottomLinkStyle(tabName) {
      if (this.rootState.bottomTabSelectedOption === tabName) {
        return {
          background: `${_.replace(this.themeColorShade, '0.06', '0.38')}`,
        };
      }
      return {};
    },
  },
};
</script>