/**
*
* CmsTemplatesComponent
*
*/

import React from 'react';
import PropTypes from 'prop-types';
// import styled from 'styled-components';
import {CapButton, CapCustomCard, CapSpin} from '@capillarytech/cap-ui-library';
import { FormattedMessage } from 'react-intl';
import messages from './messages';
import { START_FROM_SCRATCH, HIDE_DEFAULT_EMAIL_TEMPLATES } from './constants';
const {CapCustomCardList} = CapCustomCard;
function CmsTemplatesComponent(props) {
  const { accessibleFeatures = [] } = props?.currentOrgDetails || {};
  const hideDefaultEmailTemplates = accessibleFeatures.includes(HIDE_DEFAULT_EMAIL_TEMPLATES);

  const cardDataList = props.cmsTemplates?.reduce((result, template) => {
    const { name, _id, versions: { base } = {} } = template || {};
    const commonProperties = {
      key: _id,
      title: name,
      url: base?.preview_http_url,
      hoverOption: <CapButton onClick={() => props?.handleEdmDefaultTemplateSelection(_id)}><FormattedMessage {...messages.select}/></CapButton>,
    };

    // Determine if default email templates should be hidden based on feature control
    if (hideDefaultEmailTemplates) {
      if (name === START_FROM_SCRATCH) {
        commonProperties.title = <FormattedMessage {...messages.startFromScratch}/>; // Show the START_FROM_SCRATCH template name text as per the locale
        result.push(commonProperties);
      }
    } else {
      // If hideDefaultEmailTemplates is false then show all the default templates
      result.push(commonProperties);
    }

    return result;
  }, []);

  return (<CapSpin spinning={props.cmsTemplatesLoader}>
    <div className="pagination-container full-height">
      <CapCustomCardList cardList={cardDataList} type="Email" />
    </div>
  </CapSpin>);
}

CmsTemplatesComponent.defaultProps = {
  cmsTemplates: [],
  currentOrgDetails: {},
};

CmsTemplatesComponent.propTypes = {
  cmsTemplates: PropTypes.array,
  cmsTemplatesLoader: PropTypes.any,
};

export default CmsTemplatesComponent;
