import React, { useState } from 'react';
import { Modal, Button } from '@orchard/frontend-react-components';
import { formatMessage } from '@orchard/frontend-localization';
import { getUserGuideUrl } from 'src/urls/guide';
import messages from './i18n';
// eslint-disable-next-line import/no-webpack-loader-syntax
import QuestionMarkGlyph from '!svg-react-loader!./../../assets/question-mark-glyph.svg';


const CLASS_NAME = 'Instructions';

type Props = {
    header: string;
    steps: { image: string; title: string; text: string }[];
    onClick?(): void;
};

const Instructions: React.FC<Props> = ({ header, steps, onClick }) => {
    const [showModal, setShowModal] = useState(false);

    const toggleModal = () => setShowModal(!showModal);

    const handleOnClick = () => {
        if (onClick)
            onClick();
        toggleModal();
    };

    return (
        <>
            <Button className={ `${CLASS_NAME}-trigger` } variant="link" onClick={ handleOnClick }>
                <QuestionMarkGlyph />
                { formatMessage(messages.howDoesThisWork) }
            </Button>
            { showModal && (
                <Modal onRequestClose={ toggleModal } isOpen>
                    <div className={ `${CLASS_NAME}-modal` }>
                        <div className={ `${CLASS_NAME}-header` }>{ header }</div>
                        { steps.map(({ image, title, text }, index) => (
                        /* eslint-disable react/no-array-index-key */
                            <div key={ index } className={ `${CLASS_NAME}-step` }>
                                <div>
                                    <img
                                        className={ `${CLASS_NAME}-step-image` }
                                        alt=""
                                        src={ image }
                                    />
                                </div>
                                <div className={ `${CLASS_NAME}-step-text` }>
                                    <div className={ `${CLASS_NAME}-step-title` }>
                                        { title }
                                    </div>
                                    <div className={ `${CLASS_NAME}-step-body` }>{ text }</div>
                                </div>
                            </div>
                        /* eslint-enable */
                        )) }
                        <Button
                            className={ `${CLASS_NAME}-button` }
                            variant="primary"
                            onClick={ toggleModal }
                        >
                            { formatMessage(messages.gotIt) }
                        </Button>
                        <a
                            className={ `${CLASS_NAME}-user-guide-link` }
                            href={ getUserGuideUrl() }
                            rel="noreferrer"
                            target="_blank"
                        >
                            { formatMessage(messages.orViewTheFullUserGuide) }
                        </a>
                    </div>
                </Modal>
            ) }
        </>
    );
};


export default Instructions;