import * as React from 'react';
import FramePayError from '../../framepay-error';
import BaseElement from './base-element';
import type { ApplePayProps, ApplePayState } from '../../../../types/elements';

export default class ApplePayElement extends BaseElement<
    ApplePayProps,
    ApplePayState
> {
    setupElement() {
        const { Framepay } = this.props;

        const makeElement = () => {
            // elementNode already checked in BaseElement.handleSetupElement
            // just ts checks fix
            if (!this.elementNode) {
                throw FramePayError({
                    code: FramePayError.codes.elementMountError,
                    details: `ApplePayElement invalid elementNode`,
                });
            }

            try {
                return Framepay.applePay.mount(this.elementNode);
            } catch (e) {
                throw FramePayError({
                    code: FramePayError.codes.elementMountError,
                    details: `ApplePayElement error in remote api call`,
                    trace: e,
                });
            }
        };

        const element = makeElement();
        this.setState({ element });
    }
}
