import React from 'react'
import styled from "styled-components";
// import { EmbedID } from "trulioo-react";
// import VerifyButton from "@passbase/button/react";
import {StripeProvider} from 'react-stripe-elements'

const Picture = styled.img`
  border-radius: 50%;
  border: 3px solid white;
  width: 100px;
`;

const additionalFields = {
    title: 'Additional Fields',
    type: 'object',
    required: ['name', 'age'],
    properties: {
      name: {
        title: 'What is your name?',
        type: 'string',
      },
      age: {
        title: 'What is your age?',
        type: 'number',
      },
      color: {
        title: 'What is your favourite color?',
        type: 'string',
        enum: ['red', 'yellow', 'blue'],
      },
    },
  };

const handleResponse = (e) => {
    console.dir(e, {depth: null});
}

const handleSubmit = (e) => {
    console.dir(e, {depth: null});
}

const VerifyFinished = (error, authKey, additionalAttributes) => {
    console.log(error, authKey, additionalAttributes);
}

function Profile({ user }) {
  return (
    <div>
      <h2>
        <Picture src={user.picture} alt={user.displayName} /> Hello, {user.displayName}
      </h2>
      <p>This is what we know about you:</p>
      <ul>
        { Object.keys(user).map(key => (
          <li key={key}>{key}: {user[key].toString()}</li>
        ))}
      </ul>
      <div>
        <StripeProvider apiKey="pk_test_Y12mq3xm7Ws1y7MNJoYNvF0A00e35011hV">
            <h2>Compliance</h2>
        </StripeProvider>
        {/*
        <VerifyButton
            apiKey={"e0e006dbd8df146aad04474e85feaebb8f975640b5495da363f5ca11923a8b86"}
            onFinished={VerifyFinished}
            additionalAttributes={{ }}
            prefillAttributes={{ }}
            theme={{ }}
        />
        */}
        {/*
        <EmbedID url='http://localhost:3000/'
            handleResponse={handleResponse}
            handleSubmit={handleSubmit}
            additionalFields={additionalFields}
            />
        */}
      </div>
    </div>
  );
}

export default Profile;