<template>
  <card screen="chat-screen">
    <template v-slot:header>
      <div class="hed-sec selection" v-if="messageError === null">
        <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>{{ chat.title }}</h3>
      </div>
    </template>
    <template v-slot:default>
      <div class="msg-area worng" v-if="messageError">
        <h3>Oops!</h3>
        <p>{{ messageError }}</p>
        <img :src="errorImage" />
        <button class="btn-snd" @click="reset">Try again</button>
      </div>
      <template v-else-if="canConnectSocket">
        <chat
          :themeStyles="themeStyles"
          :themeStylesShades="themeStylesShades"
          :themeStylesMediumShades="themeStylesMediumShades"
        ></chat>
      </template>

      <div class="msg-area" v-else>
        <p class="text">{{ chat.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>
          <div class="form-group-chat" v-if="formVisibility.message">
            <textarea
              type="text"
              class="form-control-chat"
              placeholder="Email"
              v-model="form.message"
              :class="{
                error: submitted && $v.form.message.$error,
              }"
            ></textarea>
            <template v-if="submitted && $v.form.message.$error">
              <span class="error-msg" v-if="!$v.form.message.required"
                >This is required.</span
              >
            </template>
          </div>

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

            {{ chat.leadSubmitButtonName }}
            <img
              :src="SpinnerIcon"
              :style="{ width: '35px' }"
              v-if="loadingInitializeChat"
            />
          </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 EmailSmallIcon from '../../../../styles/2021-theme/images/comm_widget/msg-sml.png';
import ChatSmallIcon from '../../../../styles/2021-theme/images/comm_widget/chat-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 ChatSendIcon from '../../../../styles/2021-theme/images/comm_widget/snd-blue.png';
import Chat from './Chat.vue';
import {
  ROOT_SELECT_GLOBAL_CONFIG,
  CHAT_SELECT,
  ROOT_ACTION_SET_SCREEN_INFO,
  SCREEN_WELCOME,
  CHAT_SELECT_FORM_OPTIONS,
  CHAT_ACTION_START_CHAT,
  CHAT_SELECT_START_CHAT_LOADING,
  CHAT_SELECT_START_CHAT_ERROR,
  ROOT_ACTION_RESET_STATE,
  ROOT_SELECT_PARTNERSHIP_ID,
  ROOT_SELECT_WIDGET_THEME_COLOR,
  ROOT_SELECT_WIDGET_THEME_COLOR_SHADE,
  ROOT_SELECT_WIDGET_ID,
} 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;
//msg-sml
export default {
  data() {
    return {
      ChatSendIcon,
      GeneralErrorImg,
      PhoneSmallIcon,
      CallConnectedImg,
      SpinnerIcon,
      formvalidationMessages,
      LeftArrowIcon,
      submitted: false,
      form: {
        firstname: '',
        lastname: '',
        phonenum: '',
        email: '',
        message: '',
      },
    };
  },
  validations: {
    form: {
      firstname: {
        required: requiredIf(function () {
          return this.formVisibility.firstname;
        }),
      },
      lastname: {
        required: requiredIf(function () {
          return this.formVisibility.lastname;
        }),
      },
      message: {
        required: requiredIf(function () {
          return this.formVisibility.message;
        }),
      },
      phonenum: {
        required: requiredIf(function () {
          return this.formVisibility.phonenum;
        }),
        phoneNumerValidator,
      },
      email: {
        required: requiredIf(function () {
          return this.formVisibility.email;
        }),
        email,
      },
    },
  },
  components: {
    Card,
    WelcomeScreenItem,
    Chat,
  },
  computed: {
    themeStyles() {
      return {
        'background-color': `${this.themeColor}`,
      };
    },
    themeStylesShades() {
      return {
        'background-color': `${this.themeColorShade}`,
      };
    },
    themeStylesMediumShades() {
      return {
        background: `${_.replace(this.themeColorShade, '0.06', '0.18')}`,
      };
    },
    canConnectSocket() {
      return this.chat.leadId;
    },
    errorImage() {
      return this.GeneralErrorImg;
    },
    ...mapGetters('root', {
      globalConfig: ROOT_SELECT_GLOBAL_CONFIG,
      themeColor: ROOT_SELECT_WIDGET_THEME_COLOR,
      themeColorShade: ROOT_SELECT_WIDGET_THEME_COLOR_SHADE,
      widgetId: ROOT_SELECT_WIDGET_ID,
    }),
    ...mapGetters('chat', {
      loadingInitializeChat: CHAT_SELECT_START_CHAT_LOADING,
      chat: CHAT_SELECT,
      formVisibility: CHAT_SELECT_FORM_OPTIONS,
      messageError: CHAT_SELECT_START_CHAT_ERROR,
    }),

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

      this.startChat({
        firstName: this.form.firstname,
        lastName: this.form.lastname,
        emailAddress: this.form.email,
        phoneNumber: this.form.phonenum,
        message: this.form.message,
        channel_id: this.chat.channel_id,
        widgetId: this.widgetId,
      });
    },
    ...mapActions('root', {
      setScreenInfo: ROOT_ACTION_SET_SCREEN_INFO,
      reset: ROOT_ACTION_RESET_STATE,
    }),
    ...mapActions('chat', {
      startChat: CHAT_ACTION_START_CHAT,
    }),

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