import { IFormData, sendFeedbackForm } from '@rh-support/api';
import { Modal } from '@patternfly/react-core/dist/js/components/Modal';
import isEmpty from 'lodash/isEmpty';
import React, { useContext, useEffect, useState} from 'react';
import { AppMetadataStateContext } from '../../context/AppMetadataContext';

export default function FeedbackForm() {

    const [isModalOpen, toggleModal] = useState(false);

    const formInitState: IFormData = {
        isSolutionFound: null,
        levelOfSatisfied: null,
        isTimeSaved: null,
        moreInfo: ''
    };

    const [values, setValues] = useState(formInitState);

    const required = {
        isSolutionFound: true,
        levelOfSatisfied: true,
        isTimeSaved: true,
        moreInfo: false
    };

    const [isSubmitDisabled, setSubmitDisabled] = useState(true);
    const { appMetadataState: { guid } } = useContext(AppMetadataStateContext);

    useEffect(() => {
        let valid = true;
        Object.keys(values).forEach((key) => {
            if (required[key]) {
                valid = valid && !isEmpty(values[key]);
            }
        });
        setSubmitDisabled(!valid);
    }, [values]);

    const handleChange = (event: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => {
        setValues({ ...values, [event.target.name]: event.target.value });
    };

    const handleSubmit = (event: React.MouseEvent<HTMLButtonElement> | React.FormEvent<HTMLFormElement>) => {
        event.preventDefault();
        sendFeedbackForm(values, window.sessionjs, guid.data);
        setValues(formInitState);
        toggleModal(!isModalOpen);
    };

    const handleModalToggle = () => {
        toggleModal(!isModalOpen);
    };

    return (
    <>
        <button key="confirm" onClick={handleModalToggle} className="btn btn-app btn-link">Leave us feedback</button>
        <Modal
            title="Thank you for using the Solution Engine"
            ariaDescribedById="Feedback Form"
            isOpen={isModalOpen}
            onClose={handleModalToggle}
            actions={[
                <button key="confirm" onClick={handleSubmit} disabled={isSubmitDisabled} className="btn btn-app btn-primary">Submit</button>,
                <button key="cancel" onClick={handleModalToggle} className="btn btn-app btn-link">Cancel</button>
          ]}>
            <form id="feedbackForm" action="" onSubmit={handleSubmit}>
                <fieldset className="form-group radios" data-role="controlgroup">
                    <legend>Did you find a solution to your issue?</legend>
                    <label className="radio-inline" htmlFor="yes">
                        <input
                            type="radio"
                            name="isSolutionFound"
                            id="yes"
                            value="Yes"
                            checked={values.isSolutionFound === 'Yes'}
                            required={true}
                            onChange={handleChange}/> Yes
                    </label>
                    <label className="radio-inline" htmlFor="no">
                        <input
                            type="radio"
                            name="isSolutionFound"
                            id="no"
                            value="No"
                            checked={values.isSolutionFound === 'No'}
                            required={true}
                            onChange={handleChange}/> No
                    </label>
                </fieldset>
                <fieldset className="form-group radios" role="radiogroup" aria-labelledby="" data-role="controlgroup">
                    <legend id="group_label_1">How satisfied are you with the tool?</legend>
                    <label className="radio-inline" htmlFor="very_satisfied">
                        <input
                            type="radio"
                            id="very_satisfied"
                            name="levelOfSatisfied"
                            value="Very Satisfied"
                            checked={values.levelOfSatisfied === 'Very Satisfied'}
                            required={true}
                            onChange={handleChange}/> Very Satisfied
                    </label>
                    <label className="radio-inline" htmlFor="satisfied">
                        <input
                            type="radio"
                            id="satisfied"
                            name="levelOfSatisfied"
                            value="Satisfied"
                            checked={values.levelOfSatisfied === 'Satisfied'}
                            required={true}
                            onChange={handleChange}/> Satisfied
                    </label>
                    <label className="radio-inline" htmlFor="neutral">
                        <input
                            type="radio"
                            name="levelOfSatisfied"
                            id="neutral"
                            value="Neutral"
                            checked={values.levelOfSatisfied === 'Neutral'}
                            required={true}
                            onChange={handleChange}/> Neutral
                    </label>
                    <label className="radio-inline" htmlFor="unsatisfied">
                        <input
                            type="radio"
                            name="levelOfSatisfied"
                            id="unsatisfied"
                            value="Unsatisfied"
                            checked={values.levelOfSatisfied === 'Unsatisfied'}
                            required={true}
                            onChange={handleChange}/> Unsatisfied
                    </label>
                    <label className="radio-inline" htmlFor="very_unsatisfied">
                        <input
                            type="radio"
                            name="levelOfSatisfied"
                            id="very_unsatisfied"
                            value="Very Unsatisfied"
                            checked={values.levelOfSatisfied === 'Very Unsatisfied'}
                            required={true}
                            onChange={handleChange}/> Very Unsatisfied
                    </label>
                 </fieldset>
                 <fieldset className="form-group radios">
                    <legend>Did the Solution Engine save you time? </legend>
                    <label className="radio-inline" htmlFor="yes_saved">
                        <input
                            type="radio"
                            name="isTimeSaved"
                            id="yes_saved"
                            value="Yes"
                            checked={values.isTimeSaved === 'Yes'}
                            required={true}
                            onChange={handleChange}/> Yes
                    </label>
                    <label className="radio-inline" htmlFor="no_saved">
                        <input
                            type="radio"
                            name="isTimeSaved"
                            id="no_saved"
                            value="No"
                            checked={values.isTimeSaved === 'No'}
                            required={true}
                            onChange={handleChange}/> No
                    </label>
                 </fieldset>
                 <div className="form-group">
                    <label htmlFor="moreFeedback">Please share your feedback with us.</label>
                    <textarea
                        name="moreInfo"
                        id="moreFeedback"
                        value={values.moreInfo}
                        className="form-control"
                        onChange={handleChange}
                        rows={3}/>
                </div>
            </form>
        </Modal>
    </>);
 }
