import React, { Fragment , useState}  from 'react'
import { addAppReviewApi } from '~/api'
import * as SC from "./styled";
import { Formik, Form, ErrorMessage, FastField } from 'formik'
import StarRatingComponent from 'react-star-rating-component';
import * as yup from 'yup'
import ErrorList from './ErrorList'


const requestSchema = yup.object().shape({
  review: yup.string()
          .trim()
          .required('Please share your feedback'),
  rating: yup.number()
          .required('Please click a rate')
          .min(1, 'Please click a rate'),
})


const FormRatings = (props) => {
  const { addReviews, userProfile, appId, resetAddStatus } = props
  const { _id:userId, email } = userProfile
  const [serverError, setServerError] = useState('');
  const [postSuccess, setPostSuccess] = useState('');
  const [submitting, setSubmitting] = useState(false);

  const loader = submitting
                 ? <SC.Loader className="fas fa-circle-notch fa-spin"/>
                 : null



  const username = (email) => {
    const name = email.split('@')
    return name[0]
  }

  const name = username(email)

  return (
    <SC.FormRatings className="row">
      <div className="col">
        <Formik
          initialValues={{
            review: '',
            rating: 0
          }}
          enableReinitialize={true}
          validationSchema={requestSchema}
          validate={ () =>  {
            if (postSuccess || serverError) {

                setServerError('')
            }

          }}
          onSubmit={async (values, actions) => {
            setSubmitting(true)
          }}
          >
          {(props) => {
          const {
            values,
            setFieldValue,
            errors,
            setFieldTouched
          } = props

          if(submitting) {
             setFieldTouched("review", false )
             setFieldTouched("rating", false )
             setFieldValue('review', '')
             setFieldValue('rating', 0)
          }
          return (
            <Fragment>
              { postSuccess && <div className="success-message">{postSuccess}</div> }
              { serverError && <div className="error-message">{serverError}</div> }
              <ErrorList {...props}/>
              <Form>
                <h3 className="author">{name}</h3>
                <FastField
                 name="review"
                 component="textarea"
                 className="desc"
                 value={values.review || ''}
                 placeholder="Please share your feedback on this app with others. If you recommend this app, why?"/>

                <div className="star-rating">
                  <StarRatingComponent
                     starColor="#749cc6"
                     emptyStarColor="#345888"
                     name="rating"
                     starCount={5}
                     editing={true}
                     value={values.rating || 0}
                     onStarClick={(nextValue) => setFieldValue('rating', nextValue) }
                   />
                </div>
                <div className="col d-flex justify-content-end btn-wrap">
                  <button className="submit-btn" type="submit" disabled={submitting}>Submit {loader}</button>
                </div>
              </Form>
            </Fragment>
          )
          }}
        </Formik>
      </div>
    </SC.FormRatings>
  )
}

export default FormRatings