import React from 'react';
import { Message } from 'retranslate';
import { PropTypes as Types } from 'prop-types';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import StatusBoxRow from './statusBoxRow';

export const StatusBox = ({
  conversion,
  memberNumber,
  age,
  loading,
  secondPillarFunds,
  thirdPillarFunds,
}) => {
  const joinTulevaSoon = age >= 49;
  const joinTuleva2 = !(
    conversion.secondPillar.selectionComplete && conversion.secondPillar.transfersComplete
  );
  const joinTuleva3 = !(
    conversion.thirdPillar.selectionComplete && conversion.thirdPillar.transfersComplete
  );

  const isTulevaMember = memberNumber != null;

  const tulevaData = isTulevaMember
    ? [<Message params={{ memberNumber }}>account.member.statement</Message>]
    : [<Message>account.non.member.statement</Message>];

  return (
    <>
      <div className="row ">
        <div className="col-12">
          <div className="px-col mb-4">
            <p className="mb-4 lead">
              <Message>account.status.choices</Message>
            </p>
          </div>
        </div>
      </div>

      <div className="card card-secondary">
        <StatusBoxRow
          ok={!joinTuleva2 && !joinTulevaSoon}
          showAction={!loading}
          name={<Message>account.status.choice.pillar.second</Message>}
          lines={secondPillarFunds.filter(fund => fund.activeFund).map(({ name }) => name)}
        >
          {joinTuleva2 && !joinTulevaSoon && (
            <Link to="/2nd-pillar-flow" className="btn btn-light">
              <Message>account.status.choice.join.tuleva.2</Message>
            </Link>
          )}

          {joinTulevaSoon && (
            <span>
              <a className="btn btn-light" href="https://tuleva.ee/tulundusyhistu/">
                <Message>account.status.choice.1970.coming.soon</Message>
              </a>
            </span>
          )}
        </StatusBoxRow>

        <StatusBoxRow
          ok={!joinTuleva3}
          showAction={!loading}
          name={<Message>account.status.choice.pillar.third</Message>}
          lines={thirdPillarFunds.filter(fund => fund.activeFund).map(({ name }) => name)}
        >
          {joinTuleva3 && (
            <Link to="/3rd-pillar-flow" className="btn btn-light">
              <Message>account.status.choice.join.tuleva.3</Message>
            </Link>
          )}
        </StatusBoxRow>

        <StatusBoxRow
          last
          ok={isTulevaMember}
          showAction={!loading}
          name={<Message>account.status.choice.tuleva</Message>}
          lines={tulevaData}
        >
          {!isTulevaMember && (
            <span>
              <a className="btn btn-light" href="https://tuleva.ee/tulundusyhistu/">
                <Message>account.status.choice.join.tuleva</Message>
              </a>
            </span>
          )}
        </StatusBoxRow>
      </div>
      <br />
    </>
  );
};

StatusBox.defaultProps = {
  memberNumber: null,
  age: null,
  conversion: {},
  loading: false,
  secondPillarFunds: [],
  thirdPillarFunds: [],
};

StatusBox.propTypes = {
  memberNumber: Types.number,
  age: Types.number,
  conversion: Types.shape({}),
  loading: Types.bool,
  secondPillarFunds: Types.arrayOf(Types.shape({})),
  thirdPillarFunds: Types.arrayOf(Types.shape({})),
};

const mapStateToProps = state => ({
  memberNumber: (state.login.user || {}).memberNumber,
  age: (state.login.user || {}).age,
  conversion: state.login.userConversion,
  loading: state.login.loadingUserConversion,
  secondPillarFunds: state.exchange.sourceFunds,
  thirdPillarFunds: state.thirdPillar.sourceFunds,
});

export default connect(mapStateToProps)(StatusBox);

@@ -294,15 +294,8 @@
 er,%0A
-  age,%0A
   lo
@@ -301,16 +301,16 @@
 oading,%0A
+
   second
@@ -354,44 +354,8 @@
 %3E %7B%0A
-  const joinTulevaSoon = age %3E= 49;%0A
   co
@@ -1180,35 +1180,16 @@
 nTuleva2
- && !joinTulevaSoon
 %7D%0A      
@@ -1417,27 +1417,8 @@
 2 &&
- !joinTulevaSoon &&
  (%0A 
@@ -1588,270 +1588,8 @@
   )%7D
-%0A%0A          %7BjoinTulevaSoon && (%0A            %3Cspan%3E%0A              %3Ca className=%22btn btn-light%22 href=%22https://tuleva.ee/tulundusyhistu/%22%3E%0A                %3CMessage%3Eaccount.status.choice.1970.coming.soon%3C/Message%3E%0A              %3C/a%3E%0A            %3C/span%3E%0A          )%7D
 %0A   
@@ -2666,21 +2666,8 @@
 ll,%0A
-  age: null,%0A
   co
@@ -2809,29 +2809,8 @@
 er,%0A
-  age: Types.number,%0A
   co
@@ -3004,16 +3004,16 @@
 e =%3E (%7B%0A
+
   member
@@ -3063,45 +3063,8 @@
 er,%0A
-  age: (state.login.user %7C%7C %7B%7D).age,%0A
   co

Remove age logic from the status box