import React from 'react';
import {CapIcon, CapImage, CapLabel, CapDivider } from '@capillarytech/cap-ui-library';
import { RCS } from './constants';
import './index.scss';
// import { formatMessage } from '../../../utils/intl';
import messages from './messages';
import { STATUS_OPTIONS, RCS_BUTTON_TYPES, RCS_STATUSES, RCS_MEDIA_TYPES } from './constants';


export const getRcsStatusType = (status) => {
  switch (status) {
    case RCS_STATUSES.awaitingApproval:
      return RCS_STATUSES.pending;
    case RCS_STATUSES.unavailable:
      return RCS_STATUSES.unavailable;
    case RCS_STATUSES.approved:
      return RCS_STATUSES.approved;
    case RCS_STATUSES.pending:
      return RCS_STATUSES.pending;
    default:
      return RCS_STATUSES.rejected;
  }
};

export const getTemplateStatusType = (templateStatus) => {
  switch (templateStatus) {
    case RCS_STATUSES.approved:
      return 'success';
    case RCS_STATUSES.rejected:
      return 'error';
    default:
      return 'warning';
  }
};

export const getRCSContent = (template) => {
  const renderRcsSuggestionsPreview = (rcsSuggestions) => {
    const renderArray = [];
    rcsSuggestions.forEach((suggestion) => {
      renderArray.push(<CapDivider className="whatsapp-divider" />);
      if (suggestion.type === RCS_BUTTON_TYPES.QUICK_REPLY) {
        renderArray.push(
          <CapLabel type="label21" className="rcs-cta-preview">
            <CapIcon
              type='small-link'
              size="xs"
            />
            {suggestion.text}
          </CapLabel>
        );
      } else if (suggestion.type === RCS_BUTTON_TYPES.CTA) {
        renderArray.push(
          <CapLabel type="label21" className="rcs-cta-preview">
            <CapIcon type="launch" size="xs" />
            {suggestion.text}
          </CapLabel>,
        );
      } else if (suggestion.type === RCS_BUTTON_TYPES.PHONE_NUMBER) {
        renderArray.push(
          <CapLabel type="label21" className="rcs-cta-preview">
            <CapIcon type="call" size="xs" />
            {suggestion.text}
          </CapLabel>,
        );
      }
    });
    return renderArray;
  };
  const {
    versions: {
      base: {
        content: {
          [RCS]: {
            rcsContent: {
              cardContent = [{}],
              cardSettings = {},
            } = {},
          } = {},
        } = {},
      } = {},
    } = {},
  } = template;
  const {
    media = {},
    description,
    title,
    suggestions = [],
  } = cardContent[0];
  const mediaPreview = media?.thumbnailUrl ? media.thumbnailUrl : media.mediaUrl;
  return (
    <div className="cap-rcs-creatives">
      {mediaPreview && (
        <CapImage
          src={mediaPreview}
          className="rcs-listing-image"
        />
      )}
      <CapLabel
        type="label19"
        className="rcs-listing-content title"
        fontWeight="bold"
      >
        {title}
      </CapLabel>
      <CapLabel type="label19" className="rcs-listing-content desc">
        {description}
      </CapLabel>
      {renderRcsSuggestionsPreview(suggestions)}
    </div>
  );
};

