import React from 'react';
import { get } from 'lodash';
import {
  CapRow,
  CapStatus,
  CapColoredTag,
} from '@capillarytech/cap-ui-library';
import {
  getWhatsappCategory,
  getWhatsappStatus,
} from '../../v2Containers/Whatsapp/utils';
import './_whatsappStatusContainer.scss';

export const WhatsappStatusContainer = (props) => {
  const {
    status = '',
    category = '',
    hostName = '',
  } = get(props, 'template.versions.base.content.whatsapp', {});
  const categoryObj = getWhatsappCategory(category, hostName) || {};
  const {
    label: categoryLabel,
    tagColor: categoryTagColor,
    tagTextColor: categoryTextColor,
  } = categoryObj;
  return (
    <CapRow type="flex" align="middle" className="whatsapp-status-container">
      <CapStatus
        type={status}
        text={getWhatsappStatus(status)?.label}
        labelType="label3"
      />
      {categoryLabel ? (
        <CapColoredTag
          tagColor={categoryTagColor}
          tagTextColor={categoryTextColor}
          tagHeight="20px"
          tagFontSize="12px"
          className="whatsapp-category-tag"
        >
          {categoryLabel}
        </CapColoredTag>
      ) : null}
    </CapRow>
  );
};

export default WhatsappStatusContainer;
