import { FC } from 'react'
import Input from '../../../components/Input'
import Textarea from '../../../components/Textarea'
import Button from '../../../components/Button'
import { useFormik } from 'formik'
import * as Yup from 'yup'
import { ErrorType } from '../../../helpers/types'
import { toast } from 'react-toastify'
import { useCreateBlogComment } from '../hooks/useBlogsData'
import { CreateBlogCommentType } from '../types/BlogTypes'
import { useSharedStore } from '@/shared/store/sharedStore'
import Link from 'next/link'
import { LOGIN_URL } from '@/config/const'
type Props = {
    refetch: () => void
    id: string
}

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

    const { isLogin } = useSharedStore()

    const createReview = useCreateBlogComment()

    const formik = useFormik<CreateBlogCommentType>({
        initialValues: {
            title: '',
            content: ''
        },
        validationSchema: Yup.object({
            title: Yup.string().required('این فیلد الزامی است'),
            content: Yup.string().required('این فیلد الزامی است'),
        }),
        onSubmit: (values) => {
            createReview.mutate({ id: id, params: values }, {
                onSuccess: () => {
                    formik.resetForm()
                    refetch()
                },
                onError: (error: ErrorType) => {
                    if (error.response && 'status' in error.response && error.response.status === 401) {
                        window.location.href = LOGIN_URL + '?redirect=' + window.location.href
                    } else {
                        toast.error(error.response?.data?.error?.message?.[0] || 'An error occurred')
                    }
                }
            })
        },

    })

    return (
        <div className='bg-white p-6 rounded-3xl xl:w-[360px] w-full'>
            <div>
                ارسال نظر
            </div>


            {
                !isLogin ? (
                    <div className='mt-6 text-description text-sm'>
                        <div>
                            برای ارسال نظر لطفا وارد حساب کاربری خود شوید
                        </div>

                        <div className='mt-6 flex justify-center'>
                            <Link href={LOGIN_URL + '?redirect=' + window.location.href}>
                                <Button
                                    label={'ورود |  ثبت نام'}
                                    className='w-fit px-7'
                                />
                            </Link>
                        </div>


                    </div>
                ) : (
                    <div className='mt-6 text-description text-sm'>

                        <div className='mt-6'>
                            <Input
                                label={'عنوان'}
                                placeholder={'عنوان'}
                                {...formik.getFieldProps('title')}
                                error_text={formik.touched.title && formik.errors.title ? formik.errors.title : ''}
                            />
                        </div>

                        <div className='mt-6'>
                            <Textarea
                                label={'نظر'}
                                placeholder={'نظر'}
                                {...formik.getFieldProps('content')}
                                error_text={formik.touched.content && formik.errors.content ? formik.errors.content : ''}
                            />
                        </div>

                        <div className='mt-6'>
                            <Button
                                label={'ارسال نظر'}
                                onClick={() => formik.handleSubmit()}
                                isLoading={createReview.isPending}
                            />
                        </div>
                    </div>
                )
            }
        </div>
    )
}

export default CreateReview