import React from 'react';
import IntegrationForm from '../IntegrationForm';
import DocLink from 'Shared/DocLink/DocLink';
import { useModal } from 'App/components/Modal';

const JiraForm = (props) => {
    const { hideModal } = useModal();
    return (
        <div className="bg-white h-screen overflow-y-auto" style={{ width: '350px' }}>
            <h3 className="p-5 text-2xl">Jira</h3>
            <div className="p-5 border-b mb-4">
                <div>How to integrate Jira Cloud with OpenReplay.</div>
                <div className="mt-8">
                    <DocLink className="mt-4" label="Integrate Jira Cloud" url="https://docs.openreplay.com/integrations/jira" />
                </div>
            </div>
            <IntegrationForm
                {...props}
                ignoreProject={true}
                name="jira"
                customPath="jira"
                onClose={hideModal}
                formFields={[
                    {
                        key: 'username',
                        label: 'Username',
                        autoFocus: true,
                    },
                    {
                        key: 'token',
                        label: 'API Token',
                    },
                    {
                        key: 'url',
                        label: 'JIRA URL',
                        placeholder: 'E.x. https://myjira.atlassian.net',
                    },
                ]}
            />
        </div>
    )
};

JiraForm.displayName = 'JiraForm';

export default JiraForm;