<template>
  <card screen="call-screen">
    <template v-slot:header>
      <div
        class="hed-sec selection"
        v-if="callError === null && !isConnecting && !callConnected"
      >
        <button class="btn-back" @click="navigateBack">
          <img :src="LeftArrowIcon" />
        </button>
        <div class="icn" :style="themeStylesMediumShades">
          <span class="blue" :style="themeStyles">
            <img :src="iconUrl" />
          </span>
        </div>
        <h3>Call</h3>
      </div>
    </template>
    <template v-slot:default>
      <div class="msg-area worng" v-if="callError">
        <h3>Oops!</h3>
        <p>{{ callError }}</p>
        <img :src="errorImage" />
        <button class="btn-snd" @click="reset">Try again</button>
      </div>

      <div class="msg-area worng" v-else-if="isConnecting">
        <h3>Connecting!</h3>
        <img :src="ConnectingImg" />
      </div>

      <div class="msg-area worng" v-else-if="callConnected">
        <h3>Connected...</h3>
        <img :src="CallConnectedImg" />
      </div>
      <div class="msg-area" v-else>
        <p class="text">{{ call.subTitle }}</p>
        <form @submit.prevent="formSubmit">
          <div class="form-group-chat" v-if="formVisibility.firstname">
            <input
              type="text"
              class="form-control-chat"
              v-model="form.firstname"
              placeholder="First Name"
              :class="{
                error: submitted && $v.form.firstname.$error,
              }"
            />
            <template v-if="submitted && $v.form.firstname.$error">
              <span class="error-msg" v-if="!$v.form.firstname.required"
                >This is required.</span
              >
            </template>
          </div>

          <div class="form-group-chat" v-if="formVisibility.lastname">
            <input
              type="text"
              class="form-control-chat"
              placeholder="Last Name"
              v-model="form.lastname"
              :class="{
                error: submitted && $v.form.lastname.$error,
              }"
            />
            <template v-if="submitted && $v.form.lastname.$error">
              <span class="error-msg" v-if="!$v.form.lastname.required"
                >This is required.</span
              >
            </template>
          </div>
          <div class="form-group-chat" v-if="formVisibility.phonenum">
            <input
              type="text"
              class="form-control-chat"
              v-model="form.phonenum"
              placeholder="Phone Number"
              :class="{
                error: submitted && $v.form.phonenum.$error,
              }"
            />
            <template v-if="submitted && $v.form.phonenum.$error">
              <span class="error-msg" v-if="!$v.form.phonenum.required"
                >This is required.</span
              >
              <span
                class="error-msg"
                v-else-if="!$v.form.phonenum.phoneNumer"
                >{{ formvalidationMessages.phoneNumerValidatorMessage }}</span
              >
            </template>
          </div>
          <div class="form-group-chat" v-if="formVisibility.email">
            <input
              type="text"
              class="form-control-chat"
              v-model="form.email"
              placeholder="Email Address"
              :class="{
                error: submitted && $v.form.email.$error,
              }"
            />
            <template v-if="submitted && $v.form.email.$error">
              <span class="error-msg" v-if="!$v.form.email.required"
                >This is required.</span
              >
              <span class="error-msg" v-else-if="!$v.form.email.email"
                >Please provide a valid email.</span
              >
            </template>
          </div>

          <button class="btn-snd" type="submit" :style="themeStyles">
            <img :src="iconUrl" />

            Start Call
            <img
              :src="SpinnerIcon"
              :style="{ width: '35px' }"
              v-if="loadingStartCall"
            />
          </button>
        </form>
      </div>
    </template>
  </card>
</template>
<script>
import Card from './Card.vue';
import { mapGetters, mapActions } from 'vuex';
import LeftArrowIcon from '../../../../styles/2021-theme/images/comm_widget/left-arrow.png';
import PhoneSmallIcon from '../../../../styles/2021-theme/images/comm_widget/ph-sml.png';
import SpinnerIcon from '../../../../styles/2021-theme/images/comm_widget/spinner.svg';
import GeneralErrorImg from '../../../../styles/2021-theme/images/comm_widget/widget_error.svg';
import CallConnectedImg from '../../../../styles/2021-theme/images/comm_widget/call_connected.svg';

import ConnectionErrorImg from '../../../../styles/2021-theme/images/comm_widget/widget_error.svg';
import ConnectingImg from '../../../../styles/2021-theme/images/comm_widget/connecting_call.svg';

import {
  ROOT_SELECT_GLOBAL_CONFIG,
  CALL_SELECT_CAN_MOUNT,
  CALL_SELECT,
  ROOT_ACTION_SET_SCREEN_INFO,
  SCREEN_WELCOME,
  CALL_SELECT_FORM_OPTIONS,
  CALL_ACTION_START_CALL,
  ERR_NO_AGENTS_MSG,
  ERR_TOOLONG_MSG,
  ERR_GENERIC_MSG,
  CALL_SELECT_START_CALL_LOADING,
  CALL_SELECT_START_CALL_ERROR_MESSAGE,
  CALL_SELECT_IS_CONNECTING,
  ROOT_ACTION_RESET_STATE,
  CALL_SELECT_IS_CONNECTED,
  ROOT_SELECT_WIDGET_THEME_COLOR,
  ROOT_SELECT_WIDGET_THEME_COLOR_SHADE,
} from '../constants';
import WelcomeScreenItem from './WelcomeScreenItem.vue';
import * as _ from 'lodash';
import { requiredIf, email } from 'vuelidate/lib/validators';
import { formvalidation, formvalidationMessages } from '../../../utils/util';
const { phoneNumerValidator } = formvalidation;

export default {
  data() {
    return {
      CallConnectedImg,
      ConnectingImg,
      GeneralErrorImg,
      ConnectionErrorImg,
      SpinnerIcon,
      formvalidationMessages,
      LeftArrowIcon,
      submitted: false,
      form: {
        firstname: '',
        lastname: '',
        phonenum: '',
        email: '',
      },
    };
  },
  validations: {
    form: {
      firstname: {
        required: requiredIf(function () {
          return this.formVisibility.firstname;
        }),
      },
      lastname: {
        required: requiredIf(function () {
          return this.formVisibility.lastname;
        }),
      },
      phonenum: {
        required: requiredIf(function () {
          return this.formVisibility.phonenum;
        }),
        phoneNumerValidator,
      },
      email: {
        required: requiredIf(function () {
          return this.formVisibility.email;
        }),
        email,
      },
    },
  },
  components: {
    Card,
    WelcomeScreenItem,
  },
  computed: {
    themeStyles() {
      return {
        'background-color': `${this.themeColor}`,
      };
    },
    themeStylesShades() {
      return {
        'background-color': `${this.themeColorShade}`,
      };
    },
    themeStylesMediumShades() {
      return {
        background: `${_.replace(this.themeColorShade, '0.06', '0.18')}`,
      };
    },
    callConnected() {
      return this.isConnected;
    },
    errorImage() {
      if (this.callError === null) {
        return '';
      }
      if (this.callError === ERR_GENERIC_MSG) {
        return this.GeneralErrorImg;
      }
      return this.ConnectionErrorImg;
    },
    ...mapGetters('root', {
      globalConfig: ROOT_SELECT_GLOBAL_CONFIG,
      themeColor: ROOT_SELECT_WIDGET_THEME_COLOR,
      themeColorShade: ROOT_SELECT_WIDGET_THEME_COLOR_SHADE,
    }),
    ...mapGetters('call', {
      loadingStartCall: CALL_SELECT_START_CALL_LOADING,
      canCallWidgetBeMount: CALL_SELECT_CAN_MOUNT,
      call: CALL_SELECT,
      formVisibility: CALL_SELECT_FORM_OPTIONS,
      callError: CALL_SELECT_START_CALL_ERROR_MESSAGE,
      isConnecting: CALL_SELECT_IS_CONNECTING,
      isConnected: CALL_SELECT_IS_CONNECTED,
    }),

    iconUrl() {
      if (this.call.icon === 'ph-sml') {
        return PhoneSmallIcon;
      }
      return PhoneSmallIcon;
    },
  },
  methods: {
    formSubmit() {
      this.submitted = true;
      // this.$v.$touch();
      // if (this.$v.$invalid) {
      //   return;
      // }

      this.startCall({
        firstName: this.form.firstname,
        lastName: this.form.lastname,
        emailAddress: this.form.email,
        phoneNumber: this.form.phonenum,
      });
    },
    ...mapActions('root', {
      setScreenInfo: ROOT_ACTION_SET_SCREEN_INFO,
      reset: ROOT_ACTION_RESET_STATE,
    }),
    ...mapActions('call', {
      startCall: CALL_ACTION_START_CALL,
    }),

    navigateBack() {
      this.setScreenInfo({
        name: SCREEN_WELCOME,
        prev: '',
      });
    },
  },
};
</script>