import _identity from 'lodash/identity'
import React, { ReactElement } from 'react'

import { isValidNumber } from '../../utils/isValidNumber'
import config from './config'
import { IShareButton } from './index'

const SocialComponent = ({
  mainLabel,
  subLabel,
  platform,
  shareData,
  points,
  onAfterShare,
  alreadyApplied,
  oneTimeAction,
  btnClassName = '',
}: IShareButton) => {
  const Component = config(platform)?.component
  const Icon = config(platform)?.icon
  const isActionDisabled = alreadyApplied && oneTimeAction
  return (
    <>
      {Component && (
        <Component {...shareData} disabled={isActionDisabled} className={btnClassName}>
          <div
            onKeyDown={_identity}
            onClick={!isActionDisabled ? onAfterShare : _identity}
            className={`social-media-sharing ${platform}`}
          >
            <div className="share-icon">
              <Icon size={32} round />
            </div>
            <span className="share-text">
              <span className="main-label">{mainLabel} </span>
              <span className="sub-label">{subLabel}</span>
            </span>
            {isValidNumber(points) && (
              <div className="share-points">
                <span className="points-count">{points}</span>
                <span className="points-text">Points</span>
              </div>
            )}
          </div>
        </Component>
      )}
    </>
  )
}

interface SocialButtonsTypes {
  shareLink: string;
  name: string;
  appId: string;
  showDefaultShareButtons: boolean;
  shareButtons: IShareButton[];
  titleText?: string;
  footerText?: string | ReactElement;
  clientLabel?: string;
  showReferralsInfoText?: boolean;
  onAfterShare?: (eventActionId: string | undefined) => void;
}

const SocialButtons = ({
  showDefaultShareButtons,
  shareLink,
  name,
  appId,
  shareButtons,
  titleText = 'or use one of these convenient buttons:',
  footerText = (
    <p>
      We <strong>never</strong> post on Facebook without your permission!
    </p>
  ) as ReactElement,
  clientLabel,
  onAfterShare = _identity,
  showReferralsInfoText = false,
}: SocialButtonsTypes) => (
  <>
    {titleText && <div className="convenient_buttons">{titleText}</div>}
    <div className="social-media-btns">
      {showDefaultShareButtons && (
        <>
          <SocialComponent
            mainLabel="Share on"
            subLabel="Facebook"
            platform="facebook"
            shareData={{
              quote: name,
              url: shareLink,
            }}
          />
          <SocialComponent
            mainLabel="Post on"
            subLabel="X"
            platform="twitter"
            shareData={{
              title: name,
              url: shareLink,
            }}
            btnClassName="twitter-btn"
          />
          <SocialComponent
            mainLabel="Message friends on"
            subLabel="Facebook"
            platform="messenger"
            shareData={{
              appId,
              url: shareLink,
            }}
          />
          <SocialComponent
            mainLabel="Message friends on"
            subLabel="Whatsapp"
            platform="whatsapp"
            shareData={{
              title: name,
              url: shareLink,
            }}
          />
        </>
      )}
      {shareButtons.map((shareButton: IShareButton, index: number) => (
        <SocialComponent
          onAfterShare={() => onAfterShare(shareButton.eventActionId)}
          key={index}
          {...shareButton}
        />
      ))}
    </div>
    {showDefaultShareButtons || shareButtons.length ? footerText : null}
    {(showReferralsInfoText || Boolean(clientLabel)) && (
      <p className="note-message">
        <span>
          *Please note, only purchases made from a different{' '}
          {clientLabel || 'Ticket Fairy'} account can count towards your referrals
        </span>
        <span>
          {' '}
          so please make sure you ask your friends to buy their own tickets using their
          own {clientLabel || 'Ticket Fairy'} account!
        </span>
      </p>
    )}
  </>
)

export default SocialButtons