import {get, filter, cloneDeep} from 'lodash';
import React from 'react';
import {FormattedMessage} from 'react-intl';
import messages from './Create/messages';
function getPrimaryCtaFields({inputFields, fieldIndex, deepLinkOptions, tab}) {
  const currentTab = tab || this.state.currentTab;
  const newInputFields = cloneDeep(inputFields);
  newInputFields.splice(fieldIndex + 1, 0, {
    rowClassName: 'mobile-push-row',
    identifier: `cta-deeplink${currentTab > 1 ? currentTab : ''}`,

    cols: [
      {
        id: `cta-deeplink${currentTab > 1 ? currentTab : ''}`,
        type: "radioGroup",  //Resembles component to be used
        metaType: "text",
        datatype: "string",
        options: ["Deeplink", "External Link"],
        inductiveText: [<FormattedMessage {...messages.aPageWithMobileApp}/>, <FormattedMessage {...messages.anExternalWebPage}/>],
        value: "Deeplink",
        required: true,
        width: 18,
        offset: 1,
        errorMessage: "Please select link type",
        fluid: true,
        styling: "semantic",
        order: 1,
        customComponent: false,
        supportedEvents: ["onChange"],
      },

    ],
  });
  newInputFields.splice(fieldIndex + 2, 0, {
    rowClassName: 'mobile-push-row',
    id: 'cta-deeplink-select-section',
    identifier: `cta-deeplink${currentTab > 1 ? currentTab : ''}-select`,

    cols: [

      {
        id: `cta-deeplink${currentTab > 1 ? currentTab : ''}-select`,
        placeholder: "Select DeepLink",
        type: "select",  //Resembles component to be used
        options: deepLinkOptions,
        metaType: "text",
        datatype: "string",
        required: true,
        errorMessage: "Select a deeplink",
        fluid: true,
        width: 18,
        offset: 1,
        style: {
          width: '100%',


          marginBottom: '16px',
        },
        styling: "semantic",
        order: 1,
        customComponent: false,
        supportedEvents: [
          'onSelect',
        ],
      },
    ],
  });
  return newInputFields;
}

function getSecondaryCtaFields({inputFields, fieldIndex, deepLinkOptions}) {
  const inputId = `secondary-cta-${get(inputFields[fieldIndex], 'cols[0]').fieldsCount}`;
  const newInputFields = cloneDeep(inputFields);
  newInputFields.splice(fieldIndex + 1, 0, {
    rowClassName: 'mobile-push-row',
    cols: [

      {
        id: `${inputId}-label`,
        label: "Button label",
        type: "input",  //Resembles component to be used
        metaType: "text",
        datatype: "string",
        required: true,
        width: 18,
        offset: 1,
        placeholder: "Enter CTA Label here",
        fluid: true,
        styling: "semantic",
        order: 1,
        customComponent: false,
        errorMessage: "CTA label cannot be empty.",
      },

    ],
  });
  newInputFields.splice(fieldIndex + 2, 0, {
    rowClassName: 'mobile-push-row',
    identifier: `cta-deeplink-${inputId}`,
    cols: [

      {
        id: `cta-deeplink-${inputId}`,
        type: "radioGroup",  //Resembles component to be used
        metaType: "text",
        datatype: "string",
        options: ["Deeplink", "External Link"],
        inductiveText: [<FormattedMessage {...messages.aPageWithMobileApp}/>, <FormattedMessage {...messages.anExternalWebPage}/>],
        value: "Deeplink",
        required: true,
        width: 18,
        offset: 1,
        errorMessage: "Please select link type",
        fluid: true,
        styling: "semantic",
        order: 1,

        customComponent: false,
        supportedEvents: ["onChange"],
      },
    ],
  });
  newInputFields.splice(fieldIndex + 3, 0, {
    rowClassName: 'mobile-push-row',
    id: 'cta-deeplink-select-section',
    identifier: `cta-deeplink-${inputId}-select`,
    cols: [


      {
        id: `cta-deeplink-${inputId}-select`,
        placeholder: "Select DeepLink",
        type: "select",  //Resembles component to be used
        options: deepLinkOptions,
        errorMessage: "Select a deeplink",
        metaType: "text",
        datatype: "string",
        required: true,
        fluid: true,
        width: 18,
        offset: 1,
        style: {
          width: '100%',
          marginBottom: '16px',
        },
        styling: "semantic",
        order: 1,
        customComponent: false,
        supportedEvents: [
          'onSelect',
        ],
      },
    ],
  });
  return newInputFields;
}
function getLinkTypeFields({inputFieldsArgs, fieldIndex, deepLinkOptions, formData, field, tab}) {
  const currentTab = tab || this.state.currentTab;
  const inputFields = cloneDeep(inputFieldsArgs);
  const deeplinks = this.props.Templates.selectedWeChatAccount && this.props.Templates.selectedWeChatAccount.configs && !!this.props.Templates.selectedWeChatAccount.configs.deeplink ? this.props.Templates.selectedWeChatAccount.configs.deeplink : '[]';
  const deeplinkValue = formData[currentTab - 1][field.id];
  const componentIndex = fieldIndex + 1;
  const inputId = deeplinkValue && deeplinkValue.toLowerCase() === "deeplink" ? `${field.id}-select` : `${field.id}-text`;
  if ( deeplinkValue && deeplinkValue.toLowerCase() === "deeplink" && (fieldIndex === inputFields.length - 1 || inputFields[componentIndex].id !== "cta-deeplink-select-section")) {
    const deleteCount = get(inputFields, `[${componentIndex}].id`) === "cta-external-link" ? 1 : 0;
    inputFields.splice(componentIndex, deleteCount, {
      rowClassName: 'mobile-push-row',
      id: 'cta-deeplink-select-section',
      identifier: inputId,
      cols: [

        {
          id: inputId,
          placeholder: "Select DeepLink",
          type: "select",  //Resembles component to be used
          options: deepLinkOptions,
          metaType: "text",
          datatype: "string",
          errorMessage: "Select a deeplink",
          required: true,
          fluid: true,
          width: 18,
          offset: 1,
          style: {
            width: '100%',

            marginBottom: '16px',
          },
          styling: "semantic",
          order: 1,
          customComponent: false,
          supportedEvents: [
            'onSelect',
          ],
        },
      ],
    });
  } else if ( deeplinkValue && deeplinkValue.toLowerCase() === "external link") {
    const row = {
      rowClassName: 'mobile-push-row',
      id: 'cta-external-link',
      identifier: inputId,

      cols: [
        {
          // Add label control for external link input
          id: "title-tagList",
          label: "Add label",
          type: "tag-list",
          metaType: "List",
          datatype: "select",
          required: true,
          fluid: true,
          onlyDisplay: true,
          style: {
            marginRight: "10%",
            marginTop: "-3%",
          },
          styling: "semantic",
          order: 2,
          customComponent: true,
          // Helps handler identify the destination input
          target: inputId,
          supportedEvents: [
            "onTagSelect",
          ],
        },
        {
          id: inputId,
          placeholder: "External Link",
          type: "input", //Resembles component to be used
          metaType: "text",
          datatype: "string",
          errorMessage: <FormattedMessage {...messages.invalidExternalLink}/>,
          required: true,
          fluid: true,
          width: 18,
          offset: 1,
          style: {
            width: '95%',
          },
          styling: "semantic",
          order: 1,
          customComponent: false,
          standalone: false,
        },
      ],
    };
    if (!inputFields[fieldIndex + 1] || inputFields[componentIndex].id === "cta-deeplink-select-section") {
      inputFields[componentIndex] = row;
      if (inputFields[componentIndex + 1] && inputFields[componentIndex + 1].id === "show-cta-deeplink-keys-label") {
        inputFields.splice(componentIndex + 1, 1);
      }
      if (inputFields[componentIndex + 1] && inputFields[componentIndex + 1].id === "cta-deeplink-keys") {
        let configkeys = filter(JSON.parse(deeplinks), (dl) => dl.link === formData[this.state.currentTab - 1][`${field.id}-select`]);
        if (configkeys[0]) {
          configkeys = configkeys[0].keys;
        }
        if (configkeys.length) {
          //inputFields = inputFields.slice(0, componentIndex + 1).concat(inputFields.slice( componentIndex + 1 + configkeys.length, inputFields.length));

          inputFields.splice(componentIndex + 1, configkeys.length);
        }
      }
    } else {
      inputFields.splice(componentIndex, 0, row);
    }
  }
  return inputFields;
}

function getContent(obj) {
  const base = obj?.versions?.base || {};
  const android = base.ANDROID || {};
  const ios = base.IOS || {};
  const androidTitle = android.title || '';
  const androidMessage = android.message || '';
  const iosTitle = ios.title || '';
  const iosMessage = ios.message || '';
  return `${androidTitle} ${androidMessage} ${iosTitle} ${iosMessage}`;
}
export {
  getPrimaryCtaFields, getSecondaryCtaFields, getLinkTypeFields, getContent
};
