const {useMemo} = React;

const SubscriptionBox = ({subscriptionTypeCode, config, highlighted, link, handleSubscriptionSelect, amount = 1, ignoreModal = false}) => {

  const subscriptionTypeConfig = config.form_config['subscription-types'][subscriptionTypeCode];
  const descriptionArray = subscriptionTypeConfig.description.split(';');

  const addAmountSuffix = (amount) => {
    return amount && amount > 1 ? '?pocet='+ amount : '';
  }

  const formatAmountToLocale = (amount) => {
    if (!amount) {
      return 0;
    }

    return amount.toLocaleString(navigator.language, { minimumFractionDigits: 0 })
  }

  const description = useMemo(() => {
    return descriptionArray.indexOf('+') > 0 ? (
      <React.Fragment>
        <p dangerouslySetInnerHTML={{__html: descriptionArray.shift()}}></p>
        <div className="category__divider">
          <span>Plus</span>
        </div>
        <ul>
          {descriptionArray.slice(1).map(item => {
            return (<li dangerouslySetInnerHTML={{__html: item}}></li>);
          })}
        </ul>
      </React.Fragment>
    ) : (
      <React.Fragment>
        <ul>
          {descriptionArray.map(item => {
            return (<li dangerouslySetInnerHTML={{__html: item}}></li>);
          })}
        </ul>
      </React.Fragment>
    );
  }, [config]);

  const buttons = subscriptionTypeConfig.code.includes('digi-mesicne') ? (
    <div className="category__buttons">
      <div className="category__buttons__button">
        <a href={link + '/' + subscriptionTypeCode + addAmountSuffix(amount)} onClick={() => handleSubscriptionSelect('subscription_type', subscriptionTypeCode)} className="btn btn-default btn-pick-subscription" data-subscription-type-code={subscriptionTypeCode} data-amount={amount}>{formatAmountToLocale(config.form_config['subscription-types']['digi-mesicne'].price * amount)} Kč měsíčně</a>
      </div>
      <div className="category__buttons__button discount">
        <a href={link + '/' + subscriptionTypeCode.replace('mesicne', 'rocne')  + addAmountSuffix(amount)} onClick={() => handleSubscriptionSelect('subscription_type', subscriptionTypeCode.replace('mesicne', 'rocne'))} className="btn btn-primary btn-pick-subscription" data-subscription-type-code={subscriptionTypeCode.replace('mesicne', 'rocne')} data-amount={amount}>{formatAmountToLocale(config.form_config['subscription-types']['digi-rocne'].price * amount)} Kč ročně</a>
        <span>ušetříte 15 %</span>
      </div>
    </div>
  ) : (
    <div className="category__buttons single">
      <div className="category__buttons__button discount">
        {(!subscriptionTypeConfig.subscription_type_products || ignoreModal) ? (
          <React.Fragment>
            <a
              href={link + '/' + subscriptionTypeCode  + addAmountSuffix(amount)}
              onClick={() => handleSubscriptionSelect('subscription_type', subscriptionTypeConfig.code)}
              className="btn btn-primary btn-pick-subscription" data-subscription-type-code={subscriptionTypeCode} data-amount={amount}>{formatAmountToLocale(subscriptionTypeConfig.price * amount)} Kč ročně
            </a>
            {(subscriptionTypeCode === 'darek-standard' || subscriptionTypeCode === 'darek-premium') ? (<span>Doručování v rámci ČR</span>) : ('')}
          </React.Fragment>
        ) : (
          <React.Fragment>
            <a
              className="btn btn-primary"
              onClick={() => handleSubscriptionSelect('subscription_type', subscriptionTypeConfig.code, `gift-pick-${subscriptionTypeCode}`)}>
              {formatAmountToLocale(subscriptionTypeConfig.price * amount)} Kč ročně
            </a>
          </React.Fragment>
        )}
      </div>
    </div>
  );

  return (
    <div className="col-md-4">
      <div className={`category ${highlighted ? 'favourite padding-big': ''}`}>
        <div className="category__inner">
          <div className="category__favourite">
            <p>Oblíbené</p>
          </div>
          <h3>{subscriptionTypeConfig.label}</h3>
          {description}
          {buttons}
        </div>
      </div>
    </div>
  );

}