import React from 'react';
import {storiesOf} from '@storybook/react';
import {action} from '@storybook/addon-actions';
import {text, boolean} from '@storybook/addon-knobs';

import KYCForm, {DOCUMENT_TYPES, PART_TYPES} from '../../Components/KYCForm/src';

const REQUIRED_DOCUMENTS_MOCK = [
    {
      type: DOCUMENT_TYPES.ID,
      parts: [
        {
            type: PART_TYPES.ID_FRONT,
        },
        {
            type: PART_TYPES.ID_BACK,
        }],
    },
    {
        type: DOCUMENT_TYPES.UB,
          parts: [{
            type: PART_TYPES.UB,
          }],
    },
    {
      type: DOCUMENT_TYPES.CARD,
      parts: [{
        type: PART_TYPES.CARD,
        }],
    },
    {
        type: DOCUMENT_TYPES.FEEDBACK,
        parts: [
            {
                type: PART_TYPES.FEEDBACK
            }
        ],
    }
];

const DOCUMENTS_LABELS = {
  [DOCUMENT_TYPES.ID]: {
    title: 'Photo of the account owner’s ID card.',
    description: '(Passport/driver’s license/aadhar card etc.)',
    parts: {
      [PART_TYPES.ID_FRONT]: {
        title: 'Front side',
      },
      [PART_TYPES.ID_BACK]: {
        title: 'Back side (optional)',
      },
    },
  },
  [DOCUMENT_TYPES.UB]: {
    title: 'Utility Bill.',
    // eslint-disable-next-line max-len
    description: '(The bill for the use of communal services (gas/electricity/water etc.) with your full name and address visible. It must be issued no more than 3 months ago)',
  },
  [DOCUMENT_TYPES.CARD]: {
    title: 'Photos of all the cards you used to fund your account.',
    // eslint-disable-next-line max-len
    description: '(The first 6 and last 4 digits and the cardholder’s name should be visible. A photo of the card must be provided even if the transaction was failed)',
    parts: {
      [PART_TYPES.CARD]: {
        title: 'Add more (optional)',
      },
    },
  },
    [DOCUMENT_TYPES.FEEDBACK]: {
        title: 'Your comments',
        description: 'Write here all your questions, bro',
        parts: {
            [PART_TYPES.FEEDBACK]: {
                title: '12345'
            }
        },
    },
};

const UPLOADER_LABELS = {
  title: 'Drag the file here or',
  action: 'upload from your computer',
  oversizeError: 'File is too big',
};

export default storiesOf('Components | KYC', module)
  .add('KYCForm', () => {
    const containerStyle = {
      maxWidth: '600px',
      minWidth: '300px',
      padding: '24px',
    };

    const title = (
      <>
        Hello!
        <br />
        <br />
        PropellerAds is integrating KYC systems into the business processes.
        To continue working we kindly ask you to provide the following documents:
      </>
    );

    const validatorFn = () => boolean('Is valid', false);

    return (
      <div style={containerStyle}>
        <KYCForm
          elementId="kyc-form-component"
          title={title}
          uploadButtonLabel="Send documents"
          uploaderLabels={UPLOADER_LABELS}
          documentsLabels={DOCUMENTS_LABELS}
          documents={REQUIRED_DOCUMENTS_MOCK}
          validator={validatorFn}
          onUploadClick={action('onUploadClick')}
        />
      </div>
    );
  })
  .add('KYCSucessScreen', () => {
    const containerStyle = {
      maxWidth: '600px',
      minWidth: '300px',
      padding: '24px',
    };

    // eslint-disable-next-line max-len
    const description = text('Description', 'Our KYC team will check your documents within 5 business days. As soon as the verification is completed, we will send a notification to your email and to your account.');

    // eslint-disable-next-line max-len
    const support = text('Support', 'If you need to update uploaded documents while they are under review, please contact our support team.');

    return (
      <div style={containerStyle}>
        <KYCForm.SucessScreen
          elementId="kyc-success-screen-component"
          title={text('Title', 'Documents have been sent!')}
          description={description}
          support={support}
        />
      </div>
    );
  })
  .add('KYCFailScreen', () => {
    const containerStyle = {
      maxWidth: '600px',
      minWidth: '300px',
      padding: '24px',
    };

    // eslint-disable-next-line max-len
    const support = text('Support', 'Please close this window and try uploading documents again. In case this error appears again, please contact our support team.');

    return (
      <div style={containerStyle}>
        <KYCForm.FailScreen
          elementId="kyc-fail-screen-component"
          title={text('Title', 'Unfortunately, we were unable to upload your documents.')}
          support={support}
        />
      </div>
    );
  });