import React, { useState, Fragment } from 'react';
import { Card } from 'singlepage/components/Card';
import { AnimatedModal, ModalHeader, ModalBody, ModalFooter2, ModalAction } from 'components/Modal';
import { Field } from 'components/Field';
import PropTypes from 'prop-types';
import { formatAmountCents } from 'lib/money'
import './AccordionItem.scss';

export const AccordionItem = (props) => {
    const styles = { positionText: { textAlign: 'end' } }
    const removeButton = {
        display: 'flex',
        float: 'right',
        padding: 20,
    }
    const { planName, planCode, items, currencies } = props;
    let [showDeleteModal, setShowDeleteModal ] = useState(false)

    function handleClick(evt) {
        const active = evt.currentTarget.classList.toggle('active');

        (active)
        ?
            evt.currentTarget.classList.add(`accordion-item--opened`)
        :
            evt.currentTarget.classList.remove(`accordion-item--opened`)

    }

    function onClickRemove(event) {
        event.preventDefault();
        openDeleteModal();
      };

      function closeDeleteModal (){
        setShowDeleteModal(!showDeleteModal);
      };

      function openDeleteModal(){
        setShowDeleteModal(!showDeleteModal);
      };
    return (

        // Quitar <> </> estos tags propios de Fragment
        // Quitar lineas de codigo de 98 a 102, hacen al boton remove
        // AnimatedModal trasladarlo al form
        items.map((item, idx) =>
       <>
            <ul className='accordion-list' key={idx}>
                <li className={'accordion-list__item', idx} >
                    <div
                        className={`accordion-item`}
                        onClick={handleClick}
                    >
                        <div className={'accordion-item__line'}>
                            <h4 className={'accordion-item__title'}>
                                Price Change Submitted on {item.pending_plan_change.created_at}
                            </h4>
                            <span className={'accordion-item__icon'}></span>
                        </div>
                        <div className={'accordion-item__inner'}>
                            <div className={'accordion-item__content'}>
                                <Card.Row key={idx}>
                                    <Card.Col soft>
                                        <Field label="EFFECTIVE DATE" />
                                        <p className="Paragraph--ancillary">New Subscriptions</p>
                                        <p className="Paragraph--ancillary">Existing Subscriptions</p>
                                    </Card.Col>
                                    <Card.Col soft />
                                    <Card.Col soft />
                                    <Card.Col soft>
                                        <Field />
                                        <p className="accordion-item__paragraph" style={styles.positionText}>{item.pending_plan_change.activate_at}</p>
                                        <p className="accordion-item__paragraph" style={styles.positionText}>{item.pending_plan_change.activate_for_existing_subscriptions_at}</p>
                                    </Card.Col>
                                </Card.Row>
                                {
                                    currencies.map((currency, idx) =>
                                        <Card.Row key={idx}>
                                            <Card.Col soft>
                                                <Field label="PLAN/ADD-ON" />
                                                <p className="Paragraph--ancillary">{planName}({planCode})</p>
                                                {
                                                    item.pending_plan_change.pending_plan_add_on_changes.map((pending_plan_add_on_change, idx) =>
                                                    <>
                                                        <p className="Paragraph--ancillary">{pending_plan_add_on_change.add_on.name}({pending_plan_add_on_change.add_on.merchant_sku})</p>
                                                    </>
                                                    )
                                                }
                                            </Card.Col>
                                            <Card.Col soft >
                                                <Field label="OLD PRICE" style={styles.positionText} />
                                                <p className="accordion-item__paragraph" style={styles.positionText}>{formatAmountCents(currency.plan_product_option_price.price_in_decimal_units, currency.plan_product_option_price.currency_code)} {currency.plan_product_option_price.currency_code}</p>
                                                {
                                                    item.pending_plan_change.pending_plan_add_on_changes.map((pending_plan_add_on_change, idx) =>
                                                    <>
                                                        <p className="accordion-item__paragraph" style={styles.positionText}>{
                                                            formatAmountCents(pending_plan_add_on_change.add_on.currencies.find(add_on_currency => add_on_currency.code === currency.code ).price_in_decimal_units, currency.plan_product_option_price.currency_code)} {currency.plan_product_option_price.currency_code
                                                        }</p>
                                                    </>
                                                    )
                                                }
                                            </Card.Col>
                                            <Card.Col soft />
                                            <Card.Col soft />
                                            <Card.Col soft>
                                                <Field label="CHANGING TO" style={styles.positionText} />
                                                <p className="accordion-item__paragraph" style={styles.positionText}>{formatAmountCents(currency.plan_product_option_price.price_in_decimal_units, currency.plan_product_option_price.currency_code)} {currency.plan_product_option_price.currency_code}</p>
                                                {
                                                    item.pending_plan_change.pending_plan_add_on_changes.map((pending_plan_add_on_change, idx) =>
                                                    <>
                                                        {
                                                            if (pending_plan_add_on_change.pending_attribute_changes.unit_amount_in_cents[currency.plan_product_option_price.currency_code]) {
                                                                <p className="accordion-item__paragraph" style={styles.positionText}>{
                                                                     formatAmountCents(pending_plan_add_on_change.pending_attribute_changes.unit_amount_in_cents[currency.plan_product_option_price.currency_code], currency.plan_product_option_price.currency_code)} {currency.plan_product_option_price.currency_code
                                                                }</p>
                                                            }
                                                        }
                                                    </>
                                                    )
                                                }
                                            </Card.Col>
                                        </Card.Row>
                                    )
                                }
                            <div className="Actions" style={removeButton}>
                                <div className="Action">
                                    <a className="Button Button--destructive" onClick={onClickRemove} href="#">Remove</a>
                                </div>
                            </div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        <AnimatedModal show={showDeleteModal} onClose={closeDeleteModal}>
        <ModalHeader>
          <h3>Schedule Price Change?</h3>
        </ModalHeader>
        <ModalBody>
          <p>This will affect <strong>all existing and new subscriptions</strong> to this plan.</p>
          <p>Please review the effective dates and all price changes. Once scheduled, changes can only be edited or removed by contacting support.</p>
        </ModalBody>
        <ModalFooter2>
          <ModalAction>
            <a className="Button Button--solid Button--primary" rel="nofollow">Schedule</a>
          </ModalAction>
          <ModalAction>
            <a onClick={closeDeleteModal} href="#" className="Link--muted">Cancel</a>
          </ModalAction>
        </ModalFooter2>
      </AnimatedModal>
        </>
        )
    )
}

AccordionItem.displayName = 'AccordionItem';

AccordionItem.propTypes = {
    props: PropTypes.object,
    opened: PropTypes.bool,
};
re