/* eslint-disable react/destructuring-assignment */
import React from 'react';
import { Context } from 'gatsby-core-theme/src/context/MainProvider';
import TemplateOneTwo from '.';
import getPaymentData from '../../../../../../tests/factories/cards/payment.factory';

const paymentData = getPaymentData();

const translations = {
  go_to_review: 'Go To Review',
  read_review: 'Read Review',
};

export default {
  title: 'Theme/Modules/Cards/Payments/Template One',
  component: TemplateOneTwo,
  argTypes: {
    item: {
      title: 'Payment Method Item',
      control: { type: 'object' },
      defaultValue: paymentData?.title,
    },
    relation: {
      name: 'Polis',
      defaultValue: paymentData.relation.name,
    },
    page: {
      relation: {
        standardised_logo_filename_object: '1652872799/paybyphone.svg',
      },
    },
  },
};

const Template = (args) => (
  <div
    style={{
      maxWidth: ' 34.3rem',
      margin: '0 auto',
    }}
  >
    <Context.Provider value={{ translations }}>
      <TemplateOneTwo {...args} />
    </Context.Provider>
  </div>
);

export const Default = Template.bind({});

Default.args = {
  module: {
    style: 'template_1',
  },
  item: paymentData,
};
