import React from "react";
import { FormattedMessage } from "react-intl";
import {
  CAP_ORANGE,
  CAP_PURPLE02,
  CAP_PURPLE03,
  CAP_ORANGE01,
  CAP_GREEN01,
  CAP_GREEN02,
  CAP_PALE_GREY,
  FONT_COLOR_05,
} from '@capillarytech/cap-ui-library/styled/variables';
import CapHeading from "@capillarytech/cap-ui-library/CapHeading";
import CapLabel from "@capillarytech/cap-ui-library/CapLabel";
import { WEBSITE } from "../../v2Components/CapInAppCTA/constants";
import messages from "./messages";

const prefix = "app/v2Containers/InApp";
export const INAPP_TEMPLATE_CREATE_REQUEST = `${prefix}/INAPP_TEMPLATE_CREATE_REQUEST`;
export const INAPP_TEMPLATE_CREATE_SUCCESS = `${prefix}/INAPP_TEMPLATE_CREATE_SUCCESS`;
export const INAPP_TEMPLATE_CREATE_FAILURE = `${prefix}/INAPP_TEMPLATE_CREATE_FAILURE`;
export const INAPP_EDIT_TEMPLATE_REQUEST = `${prefix}/INAPP_EDIT_TEMPLATE_REQUEST`;
export const INAPP_EDIT_TEMPLATE_SUCCESS = `${prefix}/INAPP_EDIT_TEMPLATE_SUCCESS`;
export const INAPP_EDIT_TEMPLATE_FAILURE = `${prefix}/INAPP_EDIT_TEMPLATE_FAILURE`;
export const CLEAR_CREATE_RESPONSE_REQUEST = `${prefix}/CLEAR_CREATE_RESPONSE_REQUEST`;
// FOR EDIT
export const GET_INAPP_TEMPLATE_DETAILS_REQUEST = `${prefix}/Edit/GET_INAPP_TEMPLATE_DETAILS_REQUEST`;
export const GET_INAPP_TEMPLATE_DETAILS_SUCCESS = `${prefix}/Edit/GET_INAPP_TEMPLATE_DETAILS_SUCCESS`;
export const GET_INAPP_TEMPLATE_DETAILS_FAILURE = `${prefix}/Edit/GET_INAPP_TEMPLATE_DETAILS_FAILURE`;
export const RESET_EDIT_TEMPLATE = `${prefix}/Edit/RESET_EDIT_TEMPLATE`;

export const UPLOAD_INAPP_ASSET_REQUEST = `${prefix}/UPLOAD_INAPP_ASSET_REQUEST`;
export const UPLOAD_INAPP_ASSET_SUCCESS = `${prefix}/UPLOAD_INAPP_ASSET_SUCCESS`;
export const UPLOAD_INAPP_ASSET_FAILURE = `${prefix}/UPLOAD_INAPP_ASSET_FAILURE`;
export const CLEAR_INAPP_ASSET = `${prefix}/CLEAR_INAPP_ASSET`;

export const GET_BEE_POPUP_BUILDER_TOKEN_REQUEST = `${prefix}/GET_BEE_POPUP_BUILDER_TOKEN_REQUEST`;
export const GET_BEE_POPUP_BUILDER_TOKEN_SUCCESS = `${prefix}/GET_BEE_POPUP_BUILDER_TOKEN_SUCCESS`;
export const GET_BEE_POPUP_BUILDER_TOKEN_FAILURE = `${prefix}/GET_BEE_POPUP_BUILDER_TOKEN_FAILURE`;

export const INAPP_MEDIA_TYPES = {
  TEXT: "TEXT",
  IMAGE: "IMAGE",
  HTML: "HTML",
};
export const BIG_TEXT = 'BIG_TEXT';
export const BIG_PICTURE = 'BIG_PICTURE';
export const BIG_HTML = 'BIG_HTML';
export const NONE = "NONE";
export const CTA = "CTA";
export const MAPP_SDK = "MAPP_SDK";
export const INAPP_BUTTON_TYPES = {
  NONE,
  CTA,
};

export const DEEP_LINK = 'DEEP_LINK';
export const EXTERNAL_LINK = 'EXTERNAL_LINK';

export const INITIAL_CTA_DATA = [
  {
    index: 0,
    ctaType: WEBSITE,
    text: "",
    urlType: DEEP_LINK,
    url: "",
    isSaved: false,
  },
];

export const URL_MAX_LENGTH = 2000;

export const ALLOWED_IMAGE_EXTENSIONS_REGEX = /\.(jpe?g|png)$/i;
export const INAPP_IMG_SIZE = 5000000; // 5MB

export const TEMPLATE_MESSAGE_MAX_LENGTH = 1024;

export const INAPP_MESSAGE_LAYOUT_TYPES = {
  MODAL: "MODAL",
  TOPBANNER: "HEADER",
  BOTTOMBANNER: "FOOTER",
  FULLSCREEN: "FULLSCREEN",
  POPUP: "POPUP",
};

export const ANDROID = "ANDROID";
export const IOS = "iOS";
export const IOS_CAPITAL = "IOS";
export const LAYOUT_RADIO_OPTIONS = [
  {
    value: INAPP_MESSAGE_LAYOUT_TYPES.MODAL,
    label: <FormattedMessage {...messages.layoutModal} />,
  },
  {
    value: INAPP_MESSAGE_LAYOUT_TYPES.TOPBANNER,
    label: <FormattedMessage {...messages.layoutTopBanner} />,
  },
  {
    value: INAPP_MESSAGE_LAYOUT_TYPES.BOTTOMBANNER,
    label: <FormattedMessage {...messages.layoutBottomBanner} />,
  },
  {
    value: INAPP_MESSAGE_LAYOUT_TYPES.FULLSCREEN,
    label: <FormattedMessage {...messages.layoutFullScreen} />,
  },
];
export const MEDIA_RADIO_OPTIONS = [
  {
    value: INAPP_MEDIA_TYPES.TEXT,
    label: <FormattedMessage {...messages.mediaText} />,
  },
  {
    value: INAPP_MEDIA_TYPES.IMAGE,
    label: <FormattedMessage {...messages.mediaImage} />,
  },
];
export const BUTTON_RADIO_OPTIONS = [
  {
    value: INAPP_BUTTON_TYPES.NONE,
    label: (
      <CapHeading
        type="h4"
        className="inapp-button-none"
      >
        <FormattedMessage {...messages.btnTypeNone} />
      </CapHeading>
    ),
  },
  {
    value: INAPP_BUTTON_TYPES.CTA,
    label: (
      <>
        <div
          className="inapp-button-cta"
        >
          <CapHeading type="h4">
            <FormattedMessage {...messages.btnTypeCTA} />
          </CapHeading>
          <CapLabel><FormattedMessage {...messages.ctaDescription} /></CapLabel>
        </div>
      </>
    ),
  },
];

export const INAPP_LAYOUT_DETAILS = {
  MODAL: {
    tagColor: CAP_ORANGE01,
    tagTextColor: CAP_ORANGE,
    text: <FormattedMessage {...messages.layoutModal} />,
  },
  POPUP: {
    tagColor: CAP_ORANGE01,
    tagTextColor: CAP_ORANGE,
    text: <FormattedMessage {...messages.popup} />,
  },
  HEADER: {
    tagColor: CAP_PURPLE03,
    tagTextColor: CAP_PURPLE02,
    text: <FormattedMessage {...messages.layoutTopBanner} />,
  },
  FOOTER: {
    tagColor: CAP_PALE_GREY,
    tagTextColor: FONT_COLOR_05,
    text: <FormattedMessage {...messages.layoutBottomBanner} />,
  },
  FULLSCREEN: {
    tagColor: CAP_GREEN02,
    tagTextColor: CAP_GREEN01,
    text: <FormattedMessage {...messages.layoutFullScreen} />,
  },
};

export const DEVICE_SUPPORTED = '1';
export const AI_CONTENT_BOT_DISABLED = "AI_CONTENT_BOT_DISABLED";
export const MODE_SELECTION = "modeSelection";
export const BASIC_EDITOR = "basicEditor";
export const BEE_EDITOR = "beeEditor";
