import React, { useMemo } from 'react';
import PropTypes from 'prop-types';
import zaloillustration from '@capillarytech/cap-ui-library/assets/images/featureUiNotEnabledIllustration.svg';
import inAppIllustration from '@capillarytech/cap-ui-library/assets/images/featureUiNotEnabledIllustration.svg';
import { FormattedMessage } from 'react-intl';
import { CapIllustration } from "@capillarytech/cap-ui-library";
import emailIllustration from '../Assets/images/emailIllustration.svg';
import smsIllustration from '../Assets/images/smsIllustration.svg';
import pushIllustration from '../Assets/images/pushIllustration.svg';
import viberIllustration from '../Assets/images/viberIllustration.svg';
import lineIllustration from '../Assets/images/lineIllustration.svg';
import facebookIllustration from '../Assets/images/facebookIllustration.svg';
import whatsappIllustration from '../Assets/images/whatsappIllustration.png';
import whatsappOrZaloAccountIllustration from '../Assets/images/whatsappOrZaloAccountIllustration.svg';
import archiveEmptyStateIllustration from '../Assets/images/archive_Empty_Illustration.svg';
import rcsIllustration from '../Assets/images/rcsIllustration.png';
import messages from './messages';
import {
  MOBILE_PUSH, SMS, EMAIL, LINE, VIBER, FACEBOOK, WHATSAPP, RCS, ZALO, INAPP, WEBPUSH,
} from '../CreativesContainer/constants';


// Configuration object for channel types
const CHANNEL_CONFIG = {
  [SMS]: {
    illustrationImage: smsIllustration,
    buttonMessage: messages.newSMSTemplate,
    titleMessage: messages.smsTitleIllustartion,
    hasButton: true,
  },
  [EMAIL]: {
    illustrationImage: emailIllustration,
    buttonMessage: messages.newEmailTemplate,
    titleMessage: messages.emailTitleIllustartion,
    hasButton: true,
  },
  [MOBILE_PUSH]: {
    illustrationImage: pushIllustration,
    buttonMessage: messages.newNotificationTemplate,
    titleMessage: messages.pushTitleIllustartion,
    hasButton: true,
  },
  [VIBER]: {
    illustrationImage: viberIllustration,
    buttonMessage: messages.newViberTemplate,
    titleMessage: messages.viberTitleIllustartion,
    hasButton: true,
  },
  [LINE]: {
    illustrationImage: lineIllustration,
    buttonMessage: messages.newLineTemplate,
    titleMessage: messages.lineTitleIllustartion,
    hasButton: true,
  },
  [FACEBOOK]: {
    illustrationImage: facebookIllustration,
    buttonMessage: messages.newFacebookTemplate,
    titleMessage: messages.facebookTitleIllustartion,
    hasButton: true,
  },
  [RCS]: {
    illustrationImage: rcsIllustration,
    buttonMessage: messages.newRCSTemplate,
    titleMessage: messages.rcsTitleIllustartion,
    descriptionMessage: messages.rcsDescIllustartion,
    descriptionPosition: 'bottom',
    descriptionClassName: 'illustration-desc rcs-illustration',
    hasButton: true,
  },
  [INAPP]: {
    illustrationImage: inAppIllustration,
    titleMessage: messages.inAppTitleIllustration,
    descriptionMessage: messages.inAppDescIllustration,
    descriptionPosition: 'bottom',
    descriptionClassName: 'illustration-desc inapp-illustration',
    buttonClassName: 'inapp-illustration-button',
    hasButton: false,
  },
};

function ChannelTypeIllustration(props) {
  const {
    isFullMode,
    createTemplate,
    currentChannel,
    hostName,
    isArchivedMode,
  } = props;

  const templateText = useMemo(() => {
    const templateIntlMsg = <FormattedMessage {...messages.template} />;
    return isFullMode ? templateIntlMsg : '';
  }, [isFullMode]);

  if (isArchivedMode) {
    return (
      <CapIllustration
        illustrationImage={archiveEmptyStateIllustration}
        title={<FormattedMessage {...messages.noArchivedCreatives} />}
        description={<FormattedMessage {...messages.noArchivedCreativesDesc} />}
        descriptionPosition="bottom"
        descriptionClassName="illustration-desc archive-illustration"
      />
    );
  }

  const getChannelTypeIllustrationInfo = (type, hostName) => {
    // Handle special cases with hostName dependency
    if (type === WHATSAPP) {
      if (!hostName) {
        return {
          illustrationImage: whatsappOrZaloAccountIllustration,
          title: <FormattedMessage {...messages.whatsappAccountNotConfiguredTitle} />,
          description: <FormattedMessage {...messages.accountNotConfiguredDescription} />,
          descriptionPosition: 'bottom',
          descriptionClassName: 'illustration-desc zalo-illustration',
          buttonClassName: 'zalo-illustration-button',
        };
      }
      return {
        buttonLabel: <FormattedMessage {...messages.newWhatsappTemplate} values={{ template: templateText }} />,
        onClick: createTemplate,
        illustrationImage: whatsappIllustration,
        title: <FormattedMessage {...messages.whatsappTitleIllustration} values={{ template: templateText }} />,
        description: <FormattedMessage {...messages.whatsappDescIllustration} />,
        descriptionPosition: 'bottom',
        descriptionClassName: 'illustration-desc',
      };
    }

    if (type === ZALO) {
      if (!hostName) {
        return {
          illustrationImage: whatsappOrZaloAccountIllustration,
          title: <FormattedMessage {...messages.zaloAccountNotConfiguredTitle} />,
          description: <FormattedMessage {...messages.accountNotConfiguredDescription} />,
          descriptionPosition: 'bottom',
          descriptionClassName: 'illustration-desc zalo-illustration',
          buttonClassName: 'zalo-illustration-button',
        };
      }
      return {
        illustrationImage: zaloillustration,
        title: <FormattedMessage {...messages.zaloTitleIllustration} />,
        description: <FormattedMessage {...messages.zaloDescIllustration} />,
        descriptionPosition: 'bottom',
        descriptionClassName: 'illustration-desc zalo-illustration',
        buttonClassName: 'zalo-illustration-button',
      };
    }

    if (type === WEBPUSH) {
      return {
        buttonLabel: <FormattedMessage {...messages.newWebPushTemplate} values={{ template: templateText }} />,
        onClick: createTemplate,
        illustrationImage: pushIllustration,
        title: <FormattedMessage {...messages.webPushTitleIllustration} values={{ template: templateText }} />,
        description: <FormattedMessage {...messages.webPushDescIllustration} />,
        descriptionPosition: 'bottom',
        descriptionClassName: 'illustration-desc',
      };
    }

    // Handle standard channels using configuration
    const config = CHANNEL_CONFIG[type];
    if (!config) {
      return {
        illustrationImage: emailIllustration,
        title: '',
        description: '',
        descriptionPosition: 'bottom',
        descriptionClassName: 'illustration-desc unknown-illustration',
        buttonClassName: 'unknown-illustration-button',
        buttonLabel: <FormattedMessage {...messages.createNewActionButton} />,
      }; //send default illustration here
    }

    const result = {
      illustrationImage: config.illustrationImage,
      title: <FormattedMessage {...config.titleMessage} values={{ template: templateText }} />,
    };

    if (config.hasButton) {
      result.buttonLabel = <FormattedMessage {...config.buttonMessage} values={{ template: templateText }} />;
      result.onClick = createTemplate;
    }

    if (config.descriptionMessage) {
      result.description = <FormattedMessage {...config.descriptionMessage} />;
      result.descriptionPosition = config.descriptionPosition;
      result.descriptionClassName = config.descriptionClassName;
    }

    if (config.buttonClassName) {
      result.buttonClassName = config.buttonClassName;
    }

    return result;
  };

  const channelLowerCase = currentChannel?.toLowerCase() || '';

  return (
    <CapIllustration
      buttonClassName={`create-new-${channelLowerCase}`}
      {...getChannelTypeIllustrationInfo(currentChannel, hostName)}
    />
  );
}
ChannelTypeIllustration.propTypes = {
  isFullMode: PropTypes.bool,
  createTemplate: PropTypes.func.isRequired,
  currentChannel: PropTypes.string,
  hostName: PropTypes.string,
  isArchivedMode: PropTypes.bool,
};
export default ChannelTypeIllustration;
