import React, { Component } from 'react';

import { FramePayProvider, withFramePayCardComponent } from '../../../build';
import {
    deepMerge,
    prettyDebugRender,
    ReactVersion,
    renderFixture,
} from './util';
import './style.css';

const params = {
    publishableKey: 'pk_sandbox_c6cqKLddciVikuBOjhcng-rLccTz70NT4W_qZ_h',
    style: {
        base: {
            color: 'green',
            fontSize: '12px',
            webkitFontSmoothing: 'auto',
            fontFeatureSettings: 'test',
            fontStyle: 'italic',
            fontVariant: 'normal',
            fontStretch: 'none',
            fontSomething: 'not-included',
            fontOtherThing: 'not-included',
            lineHeight: '20px',
        },
        invalid: {
            fontWeight: 'bold',
        },
    },
    classes: {
        base: 'rebilly-framepay',
        focus: 'rebilly-framepay-focus',
        valid: 'rebilly-framepay-valid',
        invalid: 'rebilly-framepay-invalid',
        buttons: 'rebilly-framepay-buttons',
        webkitAutofill: 'rebilly-framepay-webkit-autofill',
    },
    icon: {
        foobar: 123,
        display: true,
        color: 'blue',
    },
};

class CardElementComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            events: {
                number: {
                    onReady: null,
                    onChange: null,
                    onFocus: null,
                    onBlur: null,
                },
                cvv: {
                    onReady: null,
                    onChange: null,
                    onFocus: null,
                    onBlur: null,
                },
                expiry: {
                    onReady: null,
                    onChange: null,
                    onFocus: null,
                    onBlur: null,
                },
            },
            token: {
                error: null,
                data: null,
            },
        };
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleSubmit(e) {
        e.preventDefault();
        /**
         *
         * @see https://www.rebilly.com/docs/dev-docs/framepay-global-reference/#framepay.createtoken
         *
         */
        this.props.Framepay.createToken(this.formNode, {
            billingAddress: {
                emails: [
                    {
                        label: 'email-extradata',
                        value: 'email-extradata@email.local',
                    },
                ],
            },
        })
            .then((data) => {
                this.deepUpdateState({ token: { error: false, data } });
            })
            .catch((err) => {
                this.deepUpdateState({ token: { error: true, data: err } });
            });
    }

    deepUpdateState(data) {
        this.setState(deepMerge(this.state, data));
    }

    render() {
        return (
            <div>
                <h2>{this.props.title}</h2>
                <h3>FramePay version: {this.props.Framepay.version}</h3>
                <div className="flex-wrapper">
                    {prettyDebugRender(this.state)}
                    <div className="example-2">
                        <form
                            id="form"
                            ref={(node) => (this.formNode = node)}
                            method="post"
                            onSubmit={this.handleSubmit}
                        >
                            <fieldset>
                                <div className="field">
                                    <input
                                        type="text"
                                        placeholder="First Name"
                                        data-rebilly="firstName"
                                    />
                                </div>
                                <div className="field">
                                    <input
                                        type="text"
                                        name="lastName"
                                        placeholder="lastName"
                                        data-rebilly="lastName"
                                    />
                                </div>
                                <div className="field">
                                    <input
                                        type="text"
                                        name="email"
                                        placeholder="Email"
                                        data-rebilly="emails"
                                    />
                                </div>
                                <div className="field">
                                    <input
                                        type="text"
                                        name="phone"
                                        placeholder="Phone"
                                        data-rebilly="phones"
                                    />
                                </div>
                                <div className="field">
                                    <this.props.CardNumberElement
                                        onReady={() =>
                                            this.deepUpdateState({
                                                events: {
                                                    number: { onReady: true },
                                                },
                                            })
                                        }
                                        onChange={(data) =>
                                            this.deepUpdateState({
                                                events: {
                                                    number: { onChange: data },
                                                },
                                            })
                                        }
                                        onFocus={() =>
                                            this.deepUpdateState({
                                                events: {
                                                    number: { onFocus: true },
                                                },
                                            })
                                        }
                                        onBlur={() =>
                                            this.deepUpdateState({
                                                events: {
                                                    number: { onBlur: true },
                                                },
                                            })
                                        }
                                    />
                                </div>

                                <div className="field">
                                    <this.props.CardCvvElement
                                        onReady={() =>
                                            this.deepUpdateState({
                                                events: {
                                                    cvv: { onReady: true },
                                                },
                                            })
                                        }
                                        onChange={(data) =>
                                            this.deepUpdateState({
                                                events: {
                                                    cvv: { onChange: data },
                                                },
                                            })
                                        }
                                        onFocus={() =>
                                            this.deepUpdateState({
                                                events: {
                                                    cvv: { onFocus: true },
                                                },
                                            })
                                        }
                                        onBlur={() =>
                                            this.deepUpdateState({
                                                events: {
                                                    cvv: { onBlur: true },
                                                },
                                            })
                                        }
                                    />
                                </div>

                                <div className="field">
                                    <this.props.CardExpiryElement
                                        onReady={() =>
                                            this.deepUpdateState({
                                                events: {
                                                    expiry: { onReady: true },
                                                },
                                            })
                                        }
                                        onChange={(data) =>
                                            this.deepUpdateState({
                                                events: {
                                                    expiry: { onChange: data },
                                                },
                                            })
                                        }
                                        onFocus={() =>
                                            this.deepUpdateState({
                                                events: {
                                                    expiry: { onFocus: true },
                                                },
                                            })
                                        }
                                        onBlur={() =>
                                            this.deepUpdateState({
                                                events: {
                                                    expiry: { onBlur: true },
                                                },
                                            })
                                        }
                                    />
                                </div>
                            </fieldset>
                            <button id="submit">Make Payment</button>
                        </form>
                    </div>
                </div>
            </div>
        );
    }
}

const CardElement = withFramePayCardComponent(CardElementComponent);

class App extends Component {
    render() {
        return (
            <FramePayProvider {...params}>
                <div>
                    {ReactVersion()}
                    <CardElement />
                </div>
            </FramePayProvider>
        );
    }
}

renderFixture(<App />);
