import React from 'react';
import {StarRatingInput} from "./StarRatingInput";
import {sc} from "../general/forms/SchemaWrappedComponents";
import Reveal from "../general/Reveal";
import {useSchema} from "../../hooks/useSchema";
import {useTracker} from "meteor/react-meteor-data";
import {Meteor} from "meteor/meteor";
import SimpleSchema from "simpl-schema";
import {ProfileImageSrc} from "../users/dashboard/NotifyActiveListingReveal";

const FilmspaceSiteSchema = new SimpleSchema({
    feedback: String,
    userId: String
})

export const ReviewFilmspacePlatform = ({ userId }) => {

    const form = useSchema(FilmspaceSiteSchema);

    const [ loaded, userData ] = useTracker(() => {
        return [
            Meteor.subscribe("userProfile", userId).ready(),
            Meteor.users.findOne({_id: userId})
        ];
    }, [ userId ]);

    if(!loaded) return null;

    return (
        <div>
            <Reveal
                className="rating-reveal"
                instance={(reveal) => this.reveal = reveal}>
                <div className="reveal-header text-center reveal-header-pattern-green">
                    <div className="modal-icon">
                        {userData.profile.profile_image_id ?
                            <ProfileImageSrc _id={userData.profile.profile_image_id} />
                            :
                            <div className='profile-icon circle dashboard-reveal'>{userData.profile.first_name.charAt(0)  + " " + userData.profile.last_name.charAt(0)}</div>
                        }
                    </div>
                    <button className="button clear" onClick={() => { this.reveal.close() } }>
                        <i className="material-icons">close</i>
                    </button>
                </div>
                <div className="reveal-body form-fields-container bg-white" style={{ paddingBottom: 16, paddingLeft: 24, paddingRight: 24 }}>
                    <h1 className="text-center font-semi-bold">Help us help you!</h1>
                    <hr className="divider" style={{ marginBottom: 18 }} />
                    <form onSubmit={(evt) => {
                        evt.preventDefault();
                        Meteor.call("Reviews.createWebsiteReview",
                            {
                                feedback: form.getValue("feedback"),
                                userId: Meteor.userId()
                            });
                    }}>
                        <p className="modal-body-copy">
                            At Everyspace, we want to be the best we can be… and to do that, we need your help! Take a moment to let us know if you have any feedback for us.
                        </p>

                        <div className="form-group margin-0">
                            <span className={'select-label select-label-position-over select-has-value'}>YOUR FEEDBACK</span>
                            <sc.FormTextArea className={"textarea-fixed-width min-height-100 mt-8 " + (form.getValue("feedback") !== "" ? "not-empty":"")} field={form.field("feedback")} label={""} />
                        </div>

                        <div>

                            <button
                                disabled={!form.isValid()}
                                className="button honey expanded box-shadow-button"
                                type={"submit"}
                            >
                                SUBMIT FEEDBACK
                            </button>
                            <button type={"button"} className="button white-on-mint expanded mt-8" onClick={() => {this.reveal.close()}}>
                                Cancel
                            </button>

                        </div>

                    </form>
                </div>

            </Reveal>
        </div>
    );
};