import Rate from 'rc-rate'
import { FC } from 'react'
import { useTranslation } from 'react-i18next'
import Input from '../../../components/Input'
import Textarea from '../../../components/Textarea'
import Button from '../../../components/Button'
import { useFormik } from 'formik'
import { CreateReviewType } from '../types/ServiecTypes'
import * as Yup from 'yup'
import { useParams } from 'react-router-dom'
import { useCreateReview, useGetServiceBySlug } from '../hooks/useServiceData'
import { ErrorType } from '../../../helpers/types'
import { toast } from '../../../components/Toast'
import Error from '../../../components/Error'

type Props = {
    refetch: () => void
}

const CreateReview: FC<Props> = ({ refetch }) => {

    const { t } = useTranslation('global')
    const { id } = useParams()
    const getDetailService = useGetServiceBySlug(id ? id : '')


    const createReview = useCreateReview()

    const formik = useFormik<CreateReviewType>({
        initialValues: {
            title: '',
            comment: '',
            rating: undefined,
            id: getDetailService.data?.data?.danakService?.id
        },
        validationSchema: Yup.object({
            title: Yup.string().required(t('errors.required')),
            comment: Yup.string().required(t('errors.required')),
            rating: Yup.string().required(t('errors.required')),
        }),
        onSubmit: (values) => {
            createReview.mutate(values, {
                onSuccess: () => {
                    formik.resetForm()
                    refetch()
                    toast(t('success'), 'success')
                },
                onError: (error: ErrorType) => {
                    toast(error.response?.data?.error?.message[0], 'error')
                }
            })
        },

    })

    return (
        <div className='bg-white p-6 rounded-3xl xl:w-[360px] w-full'>
            <div>
                {t('service.submit_comment')}
            </div>
            <div className='text-xs mt-4'>
                {t('service.hint_comment')}
            </div>

            <div className='mt-6 text-description text-sm'>
                <div>
                    {t('service.score')}
                </div>
                <div className='mt-2 dltr flex justify-end'>
                    <Rate
                        count={5}
                        style={{ fontSize: 22 }}
                        value={formik.values.rating}
                        onChange={(value) => formik.setFieldValue('rating', value)}
                    />
                </div>
                {formik.errors.rating && formik.touched.rating && <Error errorText={formik.errors.rating} />}

                <div className='mt-6'>
                    <Input
                        label={t('service.title')}
                        placeholder={t('service.enter_title_comment')}
                        {...formik.getFieldProps('title')}
                        error_text={formik.touched.title && formik.errors.title ? formik.errors.title : ''}
                    />
                </div>

                <div className='mt-6'>
                    <Textarea
                        label={t('service.your_comment')}
                        placeholder={t('service.write_your_comment')}
                        {...formik.getFieldProps('comment')}
                        error_text={formik.touched.comment && formik.errors.comment ? formik.errors.comment : ''}
                    />
                </div>

                <div className='mt-6'>
                    <Button
                        label={t('service.submit_comment')}
                        onClick={() => formik.handleSubmit()}
                        isLoading={createReview.isPending}
                    />
                </div>
            </div>
        </div>
    )
}

export default CreateReview